/* Module-local presentation, using the same tokens as the neighbouring labs. */
[data-interactive="css-explorer"] { min-width: 0; }
.cs-live > .cs-static { display: none; }
.cs-lab { font-family: var(--f-display); line-height: 1.45; }
.cs-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; }
.cs-controls > label { display: grid; align-content: start; gap: .4rem; }
.cs-control { min-width: 0; margin-block: .6rem; }
.cs-control label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .6rem; }
.cs-control output { font-family: var(--f-mono); color: var(--accent); font-weight: 700; }
.cs-lab input[type="range"] { display: block; width: 100%; min-height: 44px; accent-color: var(--accent); margin: 0; }
.cs-lab select, .cs-lab button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: .4rem .65rem; min-height: 44px; max-width: 100%; cursor: pointer; }
.cs-lab :is(input, select, button):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.cs-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cs-actions label { display: flex; align-items: center; gap: .4rem; min-height: 44px; }
.cs-actions input { accent-color: var(--accent); }
.cs-readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.cs-readouts > div { padding: .6rem; border: 1px solid var(--rule); background: var(--paper); }
.cs-readouts strong { display: block; color: var(--accent); font-size: 1.15rem; }
.cs-note { color: var(--ink-soft); font-size: .85rem; }
.cs-plots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: .8rem; }
.cs-plots > *, .cs-part { min-width: 0; margin: 0; }
.cs-plot, .cs-end { display: block; width: 100%; height: auto; background: var(--paper); border: 1px solid var(--rule); }
.cs-part { max-width: 24rem; margin: .8rem auto; }
.cs-plot text, .cs-end text { font-family: var(--f-display); font-size: 16px; fill: var(--ink); }
.cs-axis, .cs-cross, .cs-limit { fill: none; stroke: var(--ink-soft); stroke-width: 1.3; }
.cs-cross { stroke-dasharray: 2 4; }
.cs-limit { stroke-dasharray: 7 5; }
.cs-curve { fill: none; stroke: var(--accent); stroke-width: 3; }
.cs-unclamped { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 2 3; }
.cs-point { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; }
.cs-stock { fill: var(--surface-2); stroke: var(--ink-soft); stroke-width: 1.5; }
.cs-tool { fill: var(--cat1-soft); stroke: var(--accent); stroke-width: 2; }
.cs-static table { width: 100%; font-size: .9rem; }
.cs-static th, .cs-static td { padding: .4rem; }
.cs-static figure { break-inside: avoid; }
.cs-static figcaption { font-size: .9rem; margin-top: .4rem; }
.cs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 34rem) {
  .xcard:has([data-interactive="css-explorer"]) .body { padding: .7rem .5rem; }
  .cs-controls { grid-template-columns: 1fr; gap: .2rem; }
  .cs-readouts { grid-template-columns: 1fr; }
}
@media print {
  .cs-lab { display: none !important; }
  .cs-live > .cs-static { display: block !important; }
  .cs-plot { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .cs-static table { break-inside: avoid; }
}