/* ============================================================================
   The browser check. Only what exists on this page alone; every value comes
   from the scale in site.css.
   ========================================================================== */

.intro {
  padding: var(--section-y) 0 var(--section-y-tight);
}

.intro p {
  margin: 0 0 var(--space-4);
}

/* The verdict, stated once and plainly, with the browser that produced it. When every rule is
   applied the panel says so in the accent, because that is the answer the reader came for and it
   should not look like a neutral notice. */
.verdict {
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
}

.verdict[data-result="all"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.verdict[data-result="all"] .agent {
  color: var(--on-accent);
  opacity: 0.75;
}

.verdict[data-result="some"] {
  border-color: var(--ink);
  border-width: 2px;
}

.verdict strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
}

.verdict .agent {
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* One case per block. The two renderings sit one above the other, at the same
   size, and they share a single scrolling box: comparing them means moving
   both together, not one and then the other. */
.case {
  padding: var(--space-4) 0;
  border-top: var(--hairline) solid var(--rule);
}

.case:last-of-type {
  border-bottom: var(--hairline) solid var(--rule);
}

.case header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-3);
}

.case h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
}

.case code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
}

.case .pill {
  margin-left: auto;
}

.rows {
  display: grid;
  gap: var(--space-2);
  padding-bottom: var(--space-1);
  overflow-x: auto;
}

.rows > div {
  display: grid;
  grid-template-columns: var(--space-16) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
}

.who {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.rows .live {
  font-size: var(--sign-lg);
  white-space: pre;
}

.rows .mn {
  --sign: var(--sign-lg);
  max-width: none;
}