.results-wrap {
  --results-pass: #176b35;
  --results-caveat: #8a5a00;
  --results-shortfall: #9b1c1c;
  --results-platform: #65427a;
  color: #222;
}

.results-intro { margin-bottom: 10px; }
.results-intro p { max-width: 72ch; }

.results-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 9px;
}

.results-stat {
  min-width: 0;
  padding: 7px 8px 6px;
  border: 1px solid #ccc;
  background: #f7f7f7;
  font-size: 10px;
  line-height: 1.3;
  color: #666;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.results-stat b,
.results-stat strong {
  display: block;
  margin-bottom: 1px;
  color: #111;
  font: bold 17px/1.1 Consolas, "Courier New", monospace;
  letter-spacing: -.03em;
}

.results-caveat {
  margin: 0 0 9px;
  padding: 7px 9px;
  border: 1px solid #d8c985;
  border-left: 3px solid #a57600;
  background: #fffbed;
  color: #574700;
  font-size: 11px;
  line-height: 1.5;
}

.results-toolbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) auto auto;
  gap: 6px;
  align-items: end;
  margin: 0 0 8px;
}

.results-toolbar label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: #666;
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: .03em;
}

#circle-results-search,
.results-toolbar select {
  box-sizing: border-box;
  width: 100%;
  height: 29px;
  min-width: 0;
  border: 1px solid #aaa;
  border-radius: 0;
  background: #fff;
  color: #111;
  padding: 4px 7px;
  font: 11px Verdana, Tahoma, sans-serif;
}

.results-toolbar select { min-width: 112px; }

#circle-results-search:focus,
.results-toolbar select:focus {
  outline: 0;
  border-color: #777;
  background: #fffef5;
  box-shadow: inset 0 0 0 1px #ddd;
}

.results-workspace {
  display: grid;
  grid-template-columns: minmax(205px, 42%) minmax(0, 1fr);
  min-height: 430px;
  border: 1px solid #bbb;
  background: #fff;
}

.results-index { min-width: 0; background: #fafafa; }
.results-count {
  margin: 0;
  padding: 5px 8px;
  border-right: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  color: #666;
  background: #eee;
  font: 10px/1.4 Consolas, "Courier New", monospace;
}

.results-list {
  min-width: 0;
  max-height: 610px;
  overflow: auto;
  overscroll-behavior: contain;
  border-right: 1px solid #bbb;
  background: #fafafa;
}

.result-row {
  position: relative;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 0 7px;
  box-sizing: border-box;
  width: 100%;
  min-height: 53px;
  margin: 0;
  padding: 7px 8px 7px 6px;
  appearance: none;
  border: 0;
  border-left: 3px solid #aaa;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: #fff;
  color: #222;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.result-row:hover { background: #f4f4f4; }
.result-row:focus-visible { z-index: 1; outline: 2px solid #0645ad; outline-offset: -2px; }
.result-row.on,
.result-row[aria-selected="true"] { background: #e9e9e9; box-shadow: inset 2px 2px 0 #d1d1d1; }

.result-row.status-pass,
.result-row.is-pass,
.result-row--pass,
.result-row[data-status="pass"] { border-left-color: var(--results-pass); }
.result-row.status-minor,
.result-row.status-caveat,
.result-row.is-caveat,
.result-row--minor-caveat,
.result-row[data-status="minor"],
.result-row[data-status="caveat"] { border-left-color: var(--results-caveat); }
.result-row.status-shortfall,
.result-row.is-shortfall,
.result-row--shortfall,
.result-row[data-status="shortfall"] { border-left-color: var(--results-shortfall); }
.result-row.status-platform-limit,
.result-row.is-platform-limit,
.result-row--platform-limit,
.result-row[data-status="platform-limit"] { border-left-color: var(--results-platform); }
.result-row--pending,
.result-row[data-status="pending"] { border-left-color: #999; }

.result-id {
  grid-row: 1 / span 2;
  padding-top: 1px;
  color: #888;
  font: bold 10px/1.4 Consolas, "Courier New", monospace;
}

.result-title {
  min-width: 0;
  overflow: hidden;
  color: #111;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-meta {
  min-width: 0;
  margin-top: 3px;
  overflow: hidden;
  color: #777;
  font: 10px/1.25 Consolas, "Courier New", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results-detail {
  min-width: 0;
  padding: 10px 11px 12px;
  overflow: hidden;
  background: #fff;
}

.results-detail-head {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid #ddd;
}

.results-detail-head h2,
.results-detail-head h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: #111;
  font-size: 13px;
  line-height: 1.35;
}

.result-kicker {
  margin: 0 0 2px !important;
  color: #777;
  font: 9px/1.3 Consolas, "Courier New", monospace;
  text-transform: uppercase;
}

.result-badge {
  flex: 0 0 auto;
  padding: 2px 5px;
  border: 1px solid #aaa;
  background: #f2f2f2;
  color: #555;
  font: bold 9px/1.35 Consolas, "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.result-badge.status-pass,
.result-badge.is-pass,
.result-badge--pass,
.result-badge[data-status="pass"] { border-color: #8eb69a; background: #edf7f0; color: var(--results-pass); }
.result-badge.status-minor,
.result-badge.status-caveat,
.result-badge.is-caveat,
.result-badge--minor-caveat,
.result-badge[data-status="minor"],
.result-badge[data-status="caveat"] { border-color: #d8c27b; background: #fff9e8; color: var(--results-caveat); }
.result-badge.status-shortfall,
.result-badge.is-shortfall,
.result-badge--shortfall,
.result-badge[data-status="shortfall"] { border-color: #d3a0a0; background: #fff0f0; color: var(--results-shortfall); }
.result-badge.status-platform-limit,
.result-badge.is-platform-limit,
.result-badge--platform-limit,
.result-badge[data-status="platform-limit"] { border-color: #b8a1c7; background: #f7f0fa; color: var(--results-platform); }
.result-badge--pending,
.result-badge[data-status="pending"] { border-color: #aaa; background: #f2f2f2; color: #555; }

.results-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin: 0 0 9px;
}

.results-actions button {
  padding: 3px 9px;
  cursor: pointer;
  border: 1px solid #aaa;
  border-radius: 0;
  background: #fff;
  color: #222;
  font: 10px Verdana, Tahoma, sans-serif;
}

.results-actions button:hover { background: #eee; color: #d00; }
.results-actions button:active { background: #ddd; box-shadow: inset 1px 1px 0 #aaa; }
.results-actions .state { color: #777; font: 10px Consolas, "Courier New", monospace; }
.results-actions .state.good { color: var(--results-pass); }
.results-actions .state.bad { color: var(--results-shortfall); }

.results-request {
  margin: 0 0 9px;
  padding: 7px 8px;
  border: 1px solid #ded7b5;
  background: #fffef3;
  color: #333;
  font-size: 11px;
  line-height: 1.55;
}

.result-tags {
  margin: -3px 0 8px !important;
  color: #777;
  font: 10px/1.4 Consolas, "Courier New", monospace;
}

.result-metrics {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0 0 9px;
  border: 1px solid #ddd;
  background: #fafafa;
}
.result-metrics dt,
.result-metrics dd { box-sizing: border-box; min-width: 0; margin: 0; padding: 3px 5px; text-align: center; }
.result-metrics dt { grid-row: 1; color: #777; font-size: 8px; text-transform: uppercase; }
.result-metrics dd { grid-row: 2; color: #222; font: bold 10px/1.3 Consolas, "Courier New", monospace; }

.result-note {
  margin: 0 0 9px !important;
  padding-left: 7px;
  border-left: 3px solid var(--results-pass);
  color: #555;
  font-size: 10px;
  line-height: 1.5;
}
.result-note--minor-caveat { border-left-color: var(--results-caveat); }
.result-note--platform-limit { border-left-color: var(--results-platform); }
.result-note--shortfall { border-left-color: var(--results-shortfall); }
.result-note--pending { border-left-color: #999; }

.results-source {
  box-sizing: border-box;
  width: 100%;
  max-height: 295px;
  margin: 0 0 9px;
  overflow: auto;
  border-color: #ccc;
  background: #f8f8f8;
  white-space: pre;
  tab-size: 2;
}

.results-empty {
  padding: 28px 12px;
  border: 1px dashed #bbb;
  background: #fafafa;
  color: #777;
  font-size: 11px;
  text-align: center;
}

.results-method {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ddd;
  color: #666;
  font-size: 10px;
  line-height: 1.55;
}

.results-method summary {
  color: #444;
  cursor: pointer;
  font-weight: bold;
}

.results-method p:last-child { margin-bottom: 0; }

.circle-example-table-wrap {
  max-height: 58vh;
  overflow: auto;
  border-bottom: 1px solid #ddd;
  position: relative;
}

.circle-example-table-wrap table { margin-bottom: 0; }
.circle-example-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.circle-theme-example-table-wrap { max-height: 46vh; }

.circle-example-table-wrap table.extable th:first-child,
.circle-example-table-wrap table.extable td:first-child { width: 20%; }

.circle-example-table-wrap table.extable th.source-col,
.circle-example-table-wrap table.extable td.source-cell { width: 9%; }

.circle-example-table-wrap table.extable th:last-child,
.circle-example-table-wrap table.extable td:last-child { width: 14%; }

.circle-example-table-wrap .prompt-summary[role="button"] {
  cursor: help;
  outline: none;
}

.circle-example-table-wrap .prompt-summary[role="button"]:focus-visible {
  outline: 1px dotted #111;
  outline-offset: 2px;
}

.example-description-reveal {
  position: fixed;
  z-index: 1000;
  display: none;
  box-sizing: border-box;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 7px;
  border: 1px solid #333;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .18);
  color: #222;
  font: 12px/1.35 Verdana, Tahoma, sans-serif;
  white-space: nowrap;
  scrollbar-width: none;
  touch-action: pan-x;
}

.example-description-reveal::-webkit-scrollbar { display: none; }
.example-description-reveal.is-visible { display: flex; }

@media (max-width: 780px) {
  .results-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .results-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .results-toolbar label:first-child { grid-column: 1 / -1; }
  .results-toolbar select { min-width: 0; }

  .results-workspace {
    display: block;
    min-height: 0;
  }

  .results-list {
    max-height: 190px;
    border-right: 0;
    border-bottom: 1px solid #bbb;
  }

  .results-count { border-right: 0; }

  .result-row { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .results-detail { padding: 9px 9px 11px; }
  .result-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .result-metrics dt:nth-of-type(n+4), .result-metrics dd:nth-of-type(n+4) { grid-row: auto; }
  .results-source { max-height: 230px; font-size: 11px; }
}

@media (max-width: 430px) {
  .results-stat { padding-left: 6px; padding-right: 6px; }
  .results-detail-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .results-actions button { flex: 1 1 auto; }
}