.stylized-diagnostic {
  margin: 18px 0 26px;
  border: 1px solid var(--line, #d8dde6);
  border-radius: 10px;
  background: #f8fafc;
}
.stylized-diagnostic > summary {
  min-height: 48px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 750;
  color: #243247;
}
.stylized-diagnostic-body { padding: 0 18px 18px; }
.stylized-diagnostic-body > p { max-width: 82ch; line-height: 1.6; }
.stylized-diagnostic-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.stylized-diagnostic-controls button {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid #aab7c4;
  border-radius: 6px;
  background: white;
  color: #18212f;
  font: inherit;
  cursor: pointer;
}
.stylized-diagnostic-controls button[aria-pressed="true"] {
  border: 2px solid #235f9e;
  background: #e4eef8;
  font-weight: 700;
}
.stylized-diagnostic-controls button:focus-visible,
.stylized-diagnostic > summary:focus-visible { outline: 3px solid #235f9e; outline-offset: 3px; }
.stylized-diagnostic-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.stylized-diagnostic figure { min-width: 0; margin: 10px 0 0; padding: 12px; border: 1px solid #d8dde6; border-radius: 8px; background: white; }
.stylized-diagnostic figcaption { margin-bottom: 8px; font-weight: 700; }
.stylized-diagnostic figure > svg { display: block; width: 100%; height: auto; }
.stylized-diagnostic [hidden] { display: none !important; }
@media (max-width: 1100px) {
  .stylized-diagnostic-grid { grid-template-columns: 1fr; }
  .stylized-diagnostic-body { padding: 0 12px 14px; }
  .stylized-diagnostic > summary { padding: 13px 14px; }
}
@media (forced-colors: active) {
  .stylized-diagnostic-controls button:focus-visible,
  .stylized-diagnostic > summary:focus-visible { outline-color: Highlight; }
}