:root {
  color-scheme:dark;
  --background:#101216;
  --sidebar:#14171c;
  --panel:#181b21;
  --panel-raised:#1e222a;
  --border:#2c313b;
  --text:#e8eaf0;
  --muted:#929aa9;
  --subtle:#636d7d;
  --accent:#a9adff;
  --accent-bg:#2c2e48;
  --green:#89d5b0;
  --green-bg:#20382e;
  --amber:#edc385;
  --amber-bg:#3b3021;
  --red:#eea3a5;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:var(--background);
  color:var(--text);
  font-size:15px;
  line-height:1.5;
}

button,input,select {
  font:inherit;
}

button,input,select {
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  background:var(--panel-raised);
}

button {
  padding:8px 12px;
  cursor:pointer;
  font-weight:500;
  transition:background .12s,border-color .12s;
  white-space:nowrap;
}

button:hover:not(:disabled) {
  background:#2b303b;
  border-color:#51596b;
}

button:disabled {
  opacity:.4;
  cursor:default;
}

button.primary {
  background:var(--accent);
  color:#181a2d;
  border-color:var(--accent);
  font-weight:650;
}

button.primary:hover:not(:disabled) {
  background:#c3c5ff;
}

input,select {
  padding:9px 10px;
  width:100%;
  min-width:0;
  height:38px;
}

input::placeholder {
  color:#768092;
}

input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:3px;
}

label {
  display:block;
  color:#bcc2ce;
  font-size:13px;
  font-weight:550;
  letter-spacing:.02em;
}

label input,label select {
  margin-top:6px;
}

p {
  margin:0 0 10px;
}

h1,h2,h3 {
  margin:0;
  font-weight:600;
  line-height:1.3;
}

h1 {
  font-size:28px;
  letter-spacing:-.7px;
}

h2 {
  font-size:18px;
  letter-spacing:-.2px;
}

h3 {
  font-size:15px;
}

a {
  color:var(--accent);
}

[hidden] {
  display:none!important;
}

.muted,.hint {
  color:var(--muted);
}

.hint {
  font-size:13px;
  line-height:1.55;
  margin:6px 0 0;
  overflow-wrap:anywhere;
}

.eyebrow {
  font-size:12px;
  letter-spacing:1.3px;
  font-weight:650;
  color:var(--muted);
  margin:0 0 7px;
}

.button-row {
  display:flex;
  align-items:center;
  gap:6px;
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  line-height:1.4;
  font-weight:550;
  padding:4px 7px;
  border-radius:5px;
  white-space:nowrap;
  width:fit-content;
}

.badge.neutral {
  background:#272c35;
  color:#b8c0cf;
}

.badge.accent {
  background:var(--accent-bg);
  color:var(--accent);
}

.badge.good {
  background:var(--green-bg);
  color:var(--green);
}

.badge.warning {
  background:var(--amber-bg);
  color:var(--amber);
}

.skip-link {
  position:fixed;
  top:-100px;
  z-index:10;
  background:var(--accent);
  color:#111;
  padding:12px;
}

.skip-link:focus {
  top:0;
}

.sidebar {
  width:242px;
  position:fixed;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
  background:var(--sidebar);
  border-right:1px solid var(--border);
  padding:26px 20px;
  overflow:auto;
}

.brand {
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:20px;
}

.brand strong {
  display:block;
  font-size:14px;
  letter-spacing:-.15px;
}

.brand .muted {
  font-size:12px;
}

.brand-mark {
  width:32px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #4a4d65;
  border-radius:8px;
  color:var(--accent);
  font-family:monospace;
  font-size:28px;
  letter-spacing:-6px;
  padding-right:7px;
}

.brand-mark span {
  color:var(--green);
  transform:translateY(-6px);
}

.environment {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:650;
  letter-spacing:1.3px;
  color:var(--muted);
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:5px;
  margin-bottom:25px;
}

.dot {
  height:5px;
  width:5px;
  background:var(--green);
  border-radius:50%;
}

.sidebar-label {
  font-size:12px;
  letter-spacing:1px;
  color:var(--subtle);
  font-weight:650;
  margin-bottom:12px;
}

.sidebar form input {
  margin-top:8px;
}

.sidebar .button-row {
  margin-top:14px;
}

.sidebar .primary {
  flex:1;
}

.sidebar-divider {
  height:1px;
  background:var(--border);
  margin:26px 0;
}

.navigation {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.navigation button {
  background:transparent;
  border-color:transparent;
  text-align:left;
  font-size:14px;
  color:var(--muted);
  padding:10px 9px;
}

.navigation button span {
  display:inline-block;
  width:20px;
  color:#7d8596;
  font-size:18px;
}

.navigation button[aria-current] {
  background:var(--accent-bg);
  color:#d8daff;
  border-color:#3b3e5b;
}

.navigation button[aria-current] span {
  color:var(--accent);
}

.sidebar-bottom {
  margin-top:auto;
  padding-top:35px;
  color:var(--muted);
  font-size:13px;
}

.sidebar-bottom .badge {
  margin-bottom:12px;
  font-size:12px;
  letter-spacing:1px;
}

.sidebar-bottom .hint {
  font-size:12px;
}

.sidebar-bottom p {
  line-height:1.75;
}

main {
  margin-left:242px;
  padding:28px 32px 0;
  max-width:2080px;
}

.topbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}

.topbar .badge {
  padding:6px 10px;
}

.run-toolbar {
  display:flex;
  gap:10px;
  align-items:flex-end;
  padding:0;
}

.run-toolbar label:first-child {
  width:165px;
}

.run-select {
  flex:1;
  min-width:150px;
}

.run-toolbar button {
  height:38px;
  font-size:13px;
}

.notice {
  background:#1b202a;
  border:1px solid #303949;
  border-radius:6px;
  padding:10px 13px;
  color:#aab6cb;
  font-size:13px;
  margin-top:15px;
  overflow-wrap:anywhere;
}

.notice.warning {
  color:var(--amber);
  background:#28241e;
  border-color:#4f412d;
}

.run-summary {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:21px;
  min-width:0;
}

.run-summary>div {
  min-width:0;
  flex:1;
}

.run-summary strong {
  font-size:16px;
}

.run-summary .payload-details {
  max-width:250px;
  font-size:12px;
  margin:0;
}

.run-summary .payload {
  position:absolute;
  right:32px;
  z-index:2;
  max-width:min(750px,80vw);
  box-shadow:0 10px 30px #0008;
}

.view-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:24px 0 16px;
  gap:12px;
}

.view-toolbar>div:first-child {
  display:flex;
  align-items:center;
  gap:12px;
}

.view-toolbar .hint {
  margin:0;
}

.view-toolbar button {
  font-size:13px;
  padding:7px 10px;
}

.capture-status {
  margin-bottom:16px;
}

.capture-details {
  position:relative;
  width:fit-content;
}

.capture-details>summary {
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  list-style:none;
}

.capture-details>summary .badge {
  margin-right:6px;
}

.capture-notes {
  margin:0 0 12px;
  padding-left:18px;
  color:var(--amber);
}

.capture-notes li+li {
  margin-top:6px;
}

.capture-details-link {
  text-decoration:underline dotted;
  text-underline-offset:3px;
}

.capture-details>summary::-webkit-details-marker {
  display:none;
}

.capture-details>summary:hover,
.capture-details>summary:focus-visible {
  color:var(--accent);
}

.capture-details>.capture-popover {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  z-index:20;
  width:max-content;
  max-width:calc(100vw - 48px);
  max-height:55vh;
  overflow:auto;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel-raised);
  box-shadow:0 12px 32px #0006;
}

.capture-details:hover>.capture-popover,
.capture-details:focus-within>.capture-popover,
.capture-details[open]>.capture-popover {
  display:block;
}

.capture-popover-title {
  margin:0 0 10px;
  font-weight:550;
}

.capture-popover .hint {
  margin:10px 0 0;
  max-width:480px;
}

.dashboard-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.card {
  min-width:0;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius:9px;
  padding:21px;
}

.wide {
  grid-column:1/-1;
}

.card-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}

.hero-value {
  font-size:27px;
  font-weight:550;
  letter-spacing:-.6px;
  color:#d8daff;
  margin:13px 0 12px;
  overflow-wrap:anywhere;
}

.inline-facts {
  display:flex;
  gap:7px;
  align-items:center;
  flex-wrap:wrap;
}

.facts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:16px 20px;
  margin:20px 0;
}

.facts>div {
  min-width:0;
}

.facts dt {
  color:var(--muted);
  font-size:12px;
  margin-bottom:4px;
  text-transform:capitalize;
}

.facts dd {
  margin:0;
  font-size:14px;
  overflow-wrap:anywhere;
  font-variant-numeric:tabular-nums;
}

.empty {
  font-size:14px;
  color:var(--muted);
  padding:15px 0;
  line-height:1.7;
  margin:0;
}

.payload-details {
  border-top:1px solid var(--border);
  padding-top:10px;
  margin-top:14px;
  color:var(--muted);
  font-size:13px;
}

.payload-details[open] {
  color:#cbd0dc;
}

summary {
  cursor:pointer;
  line-height:1.7;
  user-select:none;
}

summary:hover {
  color:var(--text);
}

.payload {
  background:#101319;
  border:1px solid var(--border);
  padding:14px;
  border-radius:6px;
  overflow:auto;
  white-space:pre;
  max-height:480px;
  font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  color:#bdc7da;
  margin-bottom:0;
  tab-size:2;
}

.id-link {
  padding:0;
  border:0;
  background:transparent!important;
  color:var(--accent);
  font:13px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}

.id-link:hover {
  text-decoration:underline;
}

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

.flow-list li {
  position:relative;
  display:grid;
  grid-template-columns:25px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px 10px;
  border-radius:5px;
  margin-bottom:2px;
}

.flow-list li.active {
  background:#24263a;
  border:1px solid #3c3f5e;
}

.flow-list .flow-index {
  color:var(--subtle);
  font-size:13px;
  font-family:monospace;
}

.flow-list li.active .flow-index {
  color:var(--accent);
}

.flow-list p {
  margin:2px 0 0;
  font-size:12px;
}

.flow-list .payload-details {
  grid-column:2/-1;
  margin:0;
  padding:0;
  border:0;
  font-size:12px;
}

.question-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:12px;
}

.question {
  border:1px solid var(--border);
  background:#15181e;
  border-radius:7px;
  padding:16px;
  min-width:0;
}

.question.active {
  border-color:#62668e;
  background:#1e2030;
}

.question .card-heading {
  margin-bottom:10px;
}

.question-text {
  font-size:15px;
  color:#e0e4ef;
  line-height:1.65;
  margin-bottom:13px;
}

.coverage {
  list-style:none;
  margin:15px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:13px;
}

.coverage li {
  display:flex;
  gap:8px;
  align-items:flex-start;
}

.coverage li span {
  color:var(--subtle);
}

.coverage li.covered {
  color:#c7ded2;
}

.coverage li.covered span {
  color:var(--green);
}

.budget {
  display:grid;
  grid-template-columns:1fr auto;
  gap:6px;
  font-size:12px;
  color:var(--muted);
  margin:10px 0;
}

.budget strong {
  font-weight:500;
  color:#c9d0dd;
}

.budget progress {
  grid-column:1/-1;
  width:100%;
  height:4px;
  border:0;
  border-radius:3px;
  background:#303541;
  accent-color:var(--accent);
}

progress::-webkit-progress-bar {
  background:#303541;
  border-radius:3px;
}

progress::-webkit-progress-value {
  background:var(--accent);
  border-radius:3px;
}

.question details {
  font-size:13px;
  color:var(--muted);
  margin-top:12px;
}

.delivery-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.subcard {
  padding:16px;
  border:1px solid var(--border);
  border-radius:7px;
  background:#15181e;
  min-width:0;
}

.subcard h3 {
  margin-bottom:13px;
}

.subcard blockquote {
  border-left:2px solid #565a84;
  margin:15px 0;
  padding-left:12px;
  color:#c1c8d6;
  font-size:14px;
  white-space:pre-wrap;
}

.table-scroll {
  overflow:auto;
  max-width:100%;
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:13px;
}

th {
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:550;
  padding:11px 10px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

td {
  border-bottom:1px solid #262b34;
  padding:12px 10px;
  vertical-align:top;
  overflow-wrap:anywhere;
  max-width:400px;
}

tr:last-child td {
  border-bottom:0;
}

td .payload-details {
  margin:0;
  border:0;
  padding:0;
}

td .payload {
  min-width:300px;
}

.details-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;
}

.timeline-card {
  padding:20px;
}

.filters {
  display:grid;
  grid-template-columns:2fr repeat(5,minmax(80px,1fr)) auto;
  gap:8px;
  align-items:end;
  padding-bottom:19px;
  border-bottom:1px solid var(--border);
}

.filters input,.filters select {
  font-size:13px;
  height:34px;
}

.filters label {
  font-size:12px;
}

.filters button {
  height:34px;
  font-size:13px;
}

.timeline-layout {
  display:grid;
  grid-template-columns:minmax(270px,.8fr) minmax(350px,1.2fr);
  gap:20px;
  margin-top:18px;
}

.timeline {
  max-height:720px;
  overflow:auto;
}

.timeline-event {
  display:flex;
  gap:10px;
  align-items:center;
  width:100%;
  border:0;
  border-left:2px solid transparent;
  border-radius:0;
  text-align:left;
  background:transparent;
  padding:11px 8px;
  min-height:57px;
  border-bottom:1px solid #262b34;
}

.timeline-event.selected {
  background:#272a3e;
  border-left-color:var(--accent);
}

.timeline-sequence {
  width:45px;
  flex-shrink:0;
  font:12px ui-monospace,monospace;
  color:var(--subtle);
}

.timeline-description {
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
}

.timeline-description strong {
  font-size:13px;
  font-weight:500;
  white-space:normal;
  overflow-wrap:anywhere;
}

.timeline-description .hint {
  font-size:12px;
  overflow:hidden;
  text-overflow:ellipsis;
  margin:4px 0 0;
  white-space:nowrap;
}

.timeline-event time {
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}

.event-detail {
  padding:4px 0 0 20px;
  border-left:1px solid var(--border);
  min-width:0;
  max-height:920px;
  overflow:auto;
}

.event-detail .facts {
  grid-template-columns:1fr 1fr;
  font-size:12px;
}

.event-detail .facts dd {
  font-size:12px;
}

.event-detail h2 {
  font-size:17px;
}

.event-detail table {
  font-size:12px;
  table-layout:fixed;
}

.event-detail th:first-child {
  width:40%;
}

.event-detail td {
  word-break:break-word;
}

.event-detail td code {
  font:12px/1.5 ui-monospace,monospace;
}

.diff-before {
  color:#e3a8ac;
}

.diff-after {
  color:#a4d1ba;
}

.detail-heading {
  margin:22px 0 7px;
}

.correlations {
  display:flex;
  gap:9px;
  flex-wrap:wrap;
}

.correlations .id-link {
  font-size:12px;
}

.history-controls {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-top:14px;
}

.history-controls button {
  font-size:12px;
  padding:7px 9px;
}

footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  color:var(--subtle);
  padding:23px 0;
}

@media(min-width:1600px) {
  main {
    padding-left:40px;
    padding-right:40px;
  }
  .question-grid {
    grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  }
}

@media(max-width:1200px) {
  .sidebar {
    width:212px;
    padding:24px 16px;
  }
  main {
    margin-left:212px;
    padding:24px 20px 0;
  }
  .run-toolbar {
    flex-wrap:wrap;
  }
  .run-toolbar .run-select {
    flex-basis:50%;
  }
  .run-toolbar button {
    flex:1;
  }
  .filters {
    grid-template-columns:repeat(3,1fr);
  }
  .search-field {
    grid-column:1/3;
  }
  .view-toolbar {
    align-items:flex-start;
  }
  .view-toolbar>div:first-child {
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .timeline-layout {
    grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);
  }
  .question-grid {
    grid-template-columns:repeat(auto-fit,minmax(245px,1fr));
  }
  @media(max-width:900px) {
    .dashboard-grid {
      grid-template-columns:1fr;
    }
    .wide {
      grid-column:auto;
    }
    .timeline-layout {
      grid-template-columns:1fr;
    }
    .event-detail {
      border-left:0;
      border-top:1px solid var(--border);
      padding:20px 0 0;
      max-height:none;
    }
    .timeline {
      max-height:400px;
    }
    .delivery-grid {
      grid-template-columns:1fr;
    }
    .run-summary {
      flex-wrap:wrap;
    }
    .run-summary .payload-details {
      max-width:100%;
    }
    .view-toolbar {
      flex-direction:column;
    }
    .question-grid {
      grid-template-columns:1fr;
    }
  }
  @media(max-width:640px) {
    .sidebar {
      position:static;
      width:100%;
      padding:17px;
      border-right:0;
      border-bottom:1px solid var(--border);
    }
    .brand {
      margin-bottom:12px;
    }
    .environment {
      position:static;
      width:fit-content;
      margin:0 0 12px;
      font-size:12px;
    }
    .sidebar-label,.sidebar-divider,.sidebar-bottom {
      display:none;
    }
    .sidebar form {
      display:grid;
      grid-template-columns:1fr auto;
      gap:0 10px;
    }
    .sidebar form label {
      grid-column:1/-1;
    }
    .sidebar form input {
      grid-column:1;
      height:36px;
    }
    .sidebar form .hint {
      grid-column:1/-1;
      grid-row:3;
    }
    .sidebar form .button-row {
      grid-column:2;
      grid-row:2;
      margin-top:8px;
    }
    .sidebar form button {
      font-size:12px;
    }
    .navigation {
      flex-direction:row;
      gap:3px;
      overflow:auto;
      margin-top:14px;
    }
    .navigation button {
      font-size:12px;
      padding:7px;
      flex-shrink:0;
    }
    .navigation button span {
      display:none;
    }
    main {
      margin:0;
      padding:20px 14px 0;
    }
    .topbar {
      margin-bottom:18px;
    }
    h1 {
      font-size:25px;
    }
    .eyebrow {
      font-size:12px;
    }
    .run-toolbar {
      padding:0;
      gap:8px;
    }
    .run-toolbar label:first-child {
      width:125px;
    }
    .run-toolbar .run-select {
      min-width:140px;
    }
    .run-toolbar button {
      font-size:12px;
      padding:7px;
    }
    .view-toolbar .button-row {
      width:100%;
      gap:5px;
    }
    .view-toolbar button {
      flex:1;
      padding:7px 5px;
      font-size:12px;
    }
    .card {
      padding:16px;
    }
    .filters {
      grid-template-columns:1fr 1fr;
    }
    .search-field {
      grid-column:1/-1;
    }
    .timeline-card {
      padding:13px;
    }
    .timeline-layout {
      gap:12px;
    }
    .timeline-event time {
      font-size:12px;
    }
    .facts {
      grid-template-columns:1fr 1fr;
    }
    .run-summary .payload {
      right:14px;
      max-width:calc(100vw - 28px);
    }
    footer {
      flex-direction:column;
      gap:5px;
      padding:20px 0;
    }
  }
  @media(prefers-reduced-motion:reduce) {
    * {
      transition:none!important;
      scroll-behavior:auto!important;
    }
  }