.case-explainer {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 10px;
}

.case-explainer-boundary { margin: 0; color: rgba(242, 240, 234, .66); font-size: 11px; line-height: 1.5; }
.case-explainer-tabs { display: flex; flex-wrap: wrap; gap: 5px; }

.case-explainer-tab {
  min-height: 44px;
  border: 1px solid rgba(242, 189, 90, .32);
  border-radius: 4px;
  padding: 7px 9px;
  color: inherit;
  background: rgba(242, 189, 90, .06);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
}

.case-explainer-tab[aria-selected=true] { color: #17130a; background: #f2bd5a; }
.case-explainer-tab:focus-visible { outline: 2px solid #47d7cf; outline-offset: 2px; }
.case-explainer-panel { min-width: 0; color: rgba(242, 240, 234, .84); font-size: 12px; line-height: 1.55; }
.case-explainer-panel[hidden] { display: none; }
.case-explainer-panel h4 { margin: 0 0 5px; font-size: 13px; }
.case-explainer-panel p { margin: 0 0 7px; }
.case-explainer-panel ul { display: grid; gap: 5px; margin: 0; padding-left: 18px; }
.case-explainer-label { color: #f2bd5a; }
.case-explainer-boundary { color: #ffb17d; }
.case-explainer-detail { color: rgba(242, 240, 234, .78); }

@media (max-width: 600px) { .case-explainer-tab { flex: 1 1 120px; } }

@media (prefers-reduced-motion: reduce) {
  .case-explainer-tab { transition: none !important; animation: none !important; }
}