/* Topic-scoped controls and shared live/static drawing. No animated motion. */
[data-interactive="capability-explorer"] { min-width: 0; margin-block: 1rem; }
.ce-lab { font: .94rem/1.45 var(--f-display); }
.ce-live > .ce-static { display: none; }
.ce-workbench, .ce-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.ce-workbench > *, .ce-case { min-width: 0; }
.ce-curve { display: block; width: 100%; height: auto; background: var(--paper); }
.ce-curve text { fill: var(--ink); font: 18px var(--f-display); }
.ce-band { fill: var(--cat1-soft); }
.ce-tail { fill: var(--ink-soft); fill-opacity: .55; }
.ce-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.ce-limit { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ce-mean { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.ce-results { display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem; border-block: 1px solid var(--rule); }
.ce-results strong { display: block; font-variant-numeric: tabular-nums; font-size: 1.2rem; }
.ce-legend, .ce-control p { color: var(--ink-soft); font-size: .85rem; }
.ce-control label { display: flex; flex-wrap: wrap; justify-content: space-between; font-weight: 600; }
.ce-control output { color: var(--accent); font-family: var(--f-mono); }
.ce-control input { width: 100%; min-height: 44px; margin-inline: 0; accent-color: var(--accent); }
.ce-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.ce-lab button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: .4rem .6rem; min-height: 44px; cursor: pointer; }
.ce-lab button:disabled { opacity: .55; cursor: default; }
.ce-lab :is(input, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ce-predict { min-width: 0; margin: 1rem 0; border: 1px solid var(--rule); border-left: 4px solid var(--flag); padding: .6rem; }
.ce-predict legend { font-weight: 700; }
.ce-predict label { display: flex; align-items: center; gap: .5rem; min-height: 44px; }
.ce-predict input { flex: none; accent-color: var(--accent); }
.ce-case { margin: 0; padding: .5rem; border: 1px solid var(--rule); break-inside: avoid; }
.ce-case h3 { font-size: 1rem; }
.ce-case figcaption { font-size: .9rem; }
@media (max-width: 55rem) { .ce-workbench, .ce-cases { grid-template-columns: 1fr; } }
@media (max-width: 28rem) {
  .xcard:has([data-interactive="capability-explorer"]) .body { padding-inline: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-interactive="capability-explorer"] * { animation: none !important; transition: none !important; }
}
@media print {
  .ce-lab { display: none !important; }
  .ce-live > .ce-static { display: block !important; }
  .ce-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ce-curve { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}