/* ── Details / collapsibles ─────────────────────────────────── */
details { margin-bottom: 0.75rem; }
details > summary {
  cursor: pointer;
  padding: 0.6rem 0.75rem;
  background: var(--bg-hl);
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.9rem;
  user-select: none;
  list-style: none;
}
details > summary::before { content: "▶ "; font-size: 0.7rem; }
details[open] > summary::before { content: "▼ "; }
details > .details-body {
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-card);
}

/* ── Nested summary (sub-details inside details-body) ────────── */
.details-body details > summary.sub-summary {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.85rem;
}
.details-body details > .details-body {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--bg-card);
}

/* ── Job output: the answer beside its target, raw output last ── */
.response-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.response-pair > section { min-width: 0; }
.response-pair pre { max-height: 32rem; overflow: auto; margin: 0; }
.response-pair__heading { font-size: 0.85rem; margin: 0 0 0.4rem; }
.response-pair__heading span { color: var(--text-faint); font-weight: normal; }
.response-pair__empty { color: var(--text-faint); margin: 0; }
details.details--rare { opacity: 0.6; margin-top: 1rem; }
details.details--rare[open] { opacity: 1; }