/* Sweep and loft lab: scoped to its mounts, built from the shared theme tokens. */
[data-interactive="sweep-loft-lab"] { min-width: 0; margin-block: 1rem; container-type: inline-size; }
[data-interactive="sweep-loft-lab"].sll-ready > .sll-static { display: none; }
.sll-live { display: grid; gap: .85rem; min-width: 0; font: 1rem/1.45 var(--f-body); }
.sll-goal, .sll-status, .sll-feedback, .sll-limit { margin: 0; padding: .65rem .75rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--surface); }
.sll-goal { border-left: 5px solid var(--accent); }
.sll-status { min-height: 3.2em; border-left: 5px solid var(--mark-interactive, #3A8C3F); }
.sll-status.is-bad, .sll-feedback.is-bad { border-left: 5px solid var(--cat3); }
.sll-status.is-unknown { border-left: 5px solid var(--accent); }
.sll-readout output.is-unknown { border-color: var(--accent); box-shadow: inset 4px 0 var(--accent); }
.sll-feedback { border-left: 5px solid var(--accent); }
.sll-feedback:empty { display: none; }
.sll-note { display: block; margin-top: .35rem; color: var(--ink-soft); font-size: .92rem; }
.sll-limit { color: var(--ink-soft); background: var(--surface-2); font-size: .92rem; }

/* The article column is narrow: stack the stage over the controls unless the mount itself is wide. */
.sll-work { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; align-items: start; min-width: 0; }
.sll-stage { display: grid; gap: .3rem; min-width: 0; }
.sll-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .6rem; align-items: start; min-width: 0; }
.sll-controls > .sll-actions, .sll-controls > .sll-hint, .sll-controls > .sll-check, [data-sll-mode="loft"] .sll-controls > .sll-select { grid-column: 1 / -1; }
.sll-canvas { position: relative; height: 10rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--surface-2); overflow: hidden; }
.sll-controls[hidden], .sll-predict[hidden], .sll-actions[hidden], .sll-response[hidden] { display: none; }
.sll-response { display: grid; gap: .5rem; }
.sll-action-view { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: .4rem; align-items: center; }
.sll-action-view .sll-stage { display: contents; }
.sll-action-view .sll-canvas { grid-column: 1; grid-row: 1; }
.sll-action-view .sll-brief { margin-bottom: .4rem; }
.sll-action-column { grid-column: 2; grid-row: 1; }
.sll-action-column .sll-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .2rem; }
.sll-action-column .sll-actions[hidden] { display: none; }
.sll-action-column button { width: 100%; min-width: 0; padding-inline: .2rem; font-size: .8rem; overflow-wrap: anywhere; }
.sll-action-column button:only-child { grid-column: 1 / -1; }
.sll-action-view .sll-fallback .sll-canvas { height: 11rem; }
.sll-action-view .sll-fallback .sll-canvas .sll-svg { width: 100%; height: 100%; }
.sll-controls.sll-connectors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sll-select[hidden] { display: none; }
.sll-modes { display: flex; gap: .4rem; }
.sll-modes button { flex: 1; }
.sll-brief { min-height: 3.4em; margin: 0; padding: .3rem .5rem; border-left: 4px solid var(--accent); background: var(--surface); font: .85rem/1.3 var(--f-display); }
.sll-detail > summary { min-height: 44px; padding-block: .6rem; cursor: pointer; font-weight: 700; }
.sll-detail > :not(summary) { margin-block: .7rem; }
.sll-webgl { display: block; width: 100%; height: 100%; touch-action: none; }
.sll-fallback .sll-canvas { height: auto; background: var(--paper); }
.sll-fallback .sll-canvas .sll-svg { border: 0; }

.sll-live :is(button, select) { box-sizing: border-box; min-height: 44px; padding: .45rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); color: var(--ink); background: var(--surface); font: 600 .95rem/1.2 var(--f-display); cursor: pointer; }
.sll-live button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.sll-live button:disabled { opacity: .55; cursor: not-allowed; }
.sll-live :is(button, select, input, .sll-webgl):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sll-viewbar, .sll-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.sll-viewbar button, .sll-actions button { flex: 1 1 6.5rem; }
.sll-viewbar { gap: .2rem; }
.sll-viewbar button { flex: 1 1 44px; min-width: 44px; padding-inline: .15rem; font-size: .8rem; }

.sll-controls fieldset { margin: 0; padding: .45rem .55rem .55rem; min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-xs); }
.sll-controls legend, .sll-range label, .sll-select { font: 700 .92rem/1.3 var(--f-display); }
.sll-seg { display: flex; flex-wrap: wrap; gap: .35rem; }
.sll-choice { display: flex; align-items: center; gap: .45rem; min-height: 44px; padding: .2rem .6rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--surface); font: .95rem/1.25 var(--f-display); cursor: pointer; }
.sll-seg .sll-choice { flex: 1 1 5.5rem; }
.sll-seg .sll-choice span { white-space: nowrap; }
.sll-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--cat1-soft); }
.sll-choice input, .sll-check input { width: 1.15rem; height: 1.15rem; margin: 0; flex: none; accent-color: var(--accent); }
.sll-check { display: flex; align-items: center; gap: .55rem; min-height: 44px; font: .92rem/1.3 var(--f-display); }
.sll-range { display: grid; gap: .1rem; }
.sll-range label { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.sll-controls .sll-range label { font-size: .8rem; min-height: 2.6em; }
.sll-controls .sll-select { font-size: .8rem; }
.sll-range output { font-family: var(--f-mono); font-weight: 600; }
.sll-range input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); }
.sll-select { display: grid; gap: .25rem; }
.sll-select select { width: 100%; }
.sll-hint { margin: 0; color: var(--ink-soft); font-size: .9rem; }
[data-sll-when][hidden] { display: none !important; }

.sll-readout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@container (min-width: 36rem) { .sll-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sll-readout output { display: block; padding: .55rem .6rem; min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--surface); }
.sll-readout output.is-bad { border-color: var(--cat3); box-shadow: inset 4px 0 var(--cat3); }
.sll-readout strong, .sll-readout span { display: block; overflow-wrap: anywhere; }
.sll-readout strong { font: 700 1.05rem/1.25 var(--f-display); }
.sll-readout span { color: var(--ink-soft); font: .8rem/1.3 var(--f-display); }
.sll-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@container (min-width: 60rem) { .sll-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sll-figs figure[hidden] { display: none; }
.sll-figs:has(figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
.sll-live figure, .sll-static figure { margin: 0; min-width: 0; }
.sll-live figcaption, .sll-static figcaption { margin-top: .3rem; color: var(--ink-soft); font: .85rem/1.35 var(--f-display); }

.sll-predict { display: grid; gap: .55rem; padding: .75rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); background: var(--surface-2); }
.sll-predict h3, .sll-ch-head h3 { margin: 0; font: 700 1.05rem/1.3 var(--f-display); }
.sll-round { margin: 0; }
.sll-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .4rem; margin: 0; padding: .45rem .55rem .55rem; border: 1px solid var(--rule); border-radius: var(--radius-xs); }
.sll-choices legend { font: 700 .92rem/1.3 var(--f-display); }
.sll-choices > div { display: contents; }
.sll-score { margin: 0; font: 600 .9rem/1.3 var(--f-display); color: var(--ink-soft); }
.sll-score:empty { display: none; }
.sll-ch-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.sll-ch-head p, .sll-challenge > p { margin: 0; }
.sll-ch-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sll-ch-placeholder { display: grid; place-items: center; min-height: 12rem; height: 100%; padding: 1rem; border: 1px dashed var(--rule); color: var(--ink-soft); background: var(--surface); font: .95rem/1.35 var(--f-display); text-align: center; }

/* SVG figures (live and static share these classes) */
.sll-svg { display: block; width: 100%; height: auto; border: 1px solid var(--rule); background: var(--paper); }
.sll-svg text { font-family: var(--f-display); }
.sll-t-title { fill: var(--ink); font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.sll-t-note, .sll-t-tick { fill: var(--ink-soft); font-size: 12.5px; }
.sll-t-verdict { fill: var(--ink); font-size: 14px; font-weight: 800; }
.sll-svg path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sll-edge { stroke: var(--ink); stroke-width: 2.2; }
.sll-centreline { stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 6 4; }
.sll-rib { stroke: var(--ink-soft); stroke-width: 1; opacity: .5; }
.sll-radius { stroke: var(--ink-soft); stroke-width: 1.4; stroke-dasharray: 3 3; }
.sll-reach { stroke: var(--accent); stroke-width: 4; }
.sll-centremark { stroke: var(--ink); stroke-width: 2.2; }
.sll-dot { fill: var(--ink); }
.sll-wire { stroke: var(--ink-soft); stroke-width: 1.2; }
.sll-ring { stroke: var(--accent); stroke-width: 1; opacity: .75; }
.sll-ring.sll-head { stroke: var(--ink); stroke-width: 2.6; opacity: 1; }
.sll-ring.sll-thin { stroke: var(--ink-soft); opacity: .35; }
.sll-axis { stroke: var(--ink); stroke-width: 1.4; }
.sll-grid { stroke: var(--rule); stroke-width: 1; }
.sll-rho { stroke: var(--ink); stroke-width: 2.6; }
.sll-reachline { stroke: var(--accent); stroke-width: 2.6; stroke-dasharray: 7 4; }
.sll-cursor { stroke: var(--ink); stroke-width: 1.6; stroke-dasharray: 2 3; }
.sll-band { fill: var(--cat3) !important; opacity: .3; stroke: none; }
.sll-station { stroke: var(--ink); stroke-width: 2.4; }
.sll-pair { stroke: var(--ink-soft); stroke-width: 1.1; opacity: .8; }
.sll-connector { stroke: var(--accent); stroke-width: 3.6; }
.sll-start { fill: var(--accent); stroke: var(--paper); stroke-width: 1.5; }
.sll-svg .sll-bad { stroke: var(--cat3); stroke-width: 3; opacity: 1; }
.sll-svg .sll-rib.sll-bad { stroke-width: 1.4; opacity: .9; }
.sll-svg .sll-doubled { stroke-dasharray: 5 3; stroke-width: 2; }

/* static (no-JS / print) lesson */
.sll-static { display: grid; gap: .7rem; min-width: 0; }
.sll-static p { margin: 0; }
.sll-formula { padding: .6rem .8rem; border-left: 5px solid var(--accent); background: var(--surface); font: 700 1.05rem/1.4 var(--f-display); }
.sll-static-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.sll-static table { width: 100%; border-collapse: collapse; }
.sll-static :is(th, td) { padding: .4rem .5rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.sll-static-challenges { display: grid; gap: .6rem; margin: 0; padding-left: 1.4rem; }
.sll-static-challenges details { margin-top: .25rem; }

@media (max-width: 40rem) {
  .sll-ch-figs, .sll-static-grid { grid-template-columns: minmax(0, 1fr); }
  .sll-canvas { height: 10rem; }
  .xcard:has([data-interactive="sweep-loft-lab"]) .body { padding-inline: .55rem; }
}
.presenting [data-interactive="sweep-loft-lab"] .sll-canvas { height: min(24vh, 15rem); }
@media (prefers-reduced-motion: reduce) {
  [data-interactive="sweep-loft-lab"] * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  /* the static lesson spans pages: let the card and mount break (theme default avoids breaks inside mounts) */
  .xcard:has([data-interactive="sweep-loft-lab"]) { break-inside: auto !important; break-before: page; page-break-before: always; }
  [data-interactive="sweep-loft-lab"] { break-inside: auto !important; }
  .sll-static > p:first-child, .sll-formula { break-after: avoid; }
  [data-interactive="sweep-loft-lab"] .sll-live { display: none !important; }
  [data-interactive="sweep-loft-lab"].sll-ready > .sll-static { display: grid !important; }
  .sll-static figure { break-inside: avoid; page-break-inside: avoid; }
  .sll-static .sll-svg { max-height: 4.4in; width: auto; max-width: 100%; margin-inline: auto; }
  .sll-static .sll-iso:not(.sll-loft) { max-height: 3.5in; }
  .sll-static .sll-chart { max-height: 2.4in; }
  .sll-static table { break-inside: avoid; }
  .sll-static-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}