/* Shared parts for lesson workspaces: stage, transport, results, bars. */
.workspace-body { display: flex; flex-direction: column; overflow: hidden; }
.workspace-body > [role=tabpanel] { flex: 1 1 auto; min-height: 0; overflow: auto; }
.ws-pane { padding: 16px 22px 12px; }
.ws-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ws-heading h2 { font-size: 20px; }
.ws-stage { margin: 0; padding: 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--sunken); }
.ws-stage svg { display: block; width: 100%; height: auto; max-height: min(36vh, 360px); }
.ws-stage figcaption { padding: 6px 4px 2px; font-size: 15px; color: var(--muted); text-align: center; }
.ws-caption { margin: 14px 0 0; padding: 12px 16px; border-left: 4px solid var(--amber); border-radius: 0 var(--radius) var(--radius) 0; background: #17202e; font-size: 16px; line-height: 1.6; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.transport .btn { min-width: 40px; min-height: 38px; padding: 4px 10px; }
.transport input[type=range] { flex: 1 1 140px; min-width: 100px; }
.transport select { min-height: 38px; }
.transport .transport-parts { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.transport-caption { flex: 1 1 100%; font-size: 15px; color: var(--muted); }
.results-panel { flex: none; max-height: 34%; overflow: auto; padding: 10px 22px 12px; border-top: 1px solid var(--border-strong); background: #080c14; }
.results-header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.results-header h2 { font-size: 17px; }
.results-header span { font-size: 14px; color: var(--muted); }
.results-text { margin: 0 0 10px; font-size: 16px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 72px; align-items: center; gap: 12px; font-size: 15px; }
.bar-track { position: relative; height: 14px; border-radius: 3px; background: #202938; }
.bar-track.signed::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: #9bb0dc; }
.bar-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--green); }
.bar-fill.axis { background: var(--amber); }
.bar-fill.down { background: var(--blue); }
.bar-fill.second { background: var(--pink); }
.bar-row output { text-align: right; font-variant-numeric: tabular-nums; }
.code-pane { padding: 18px 22px; }
.code-pane pre { margin: 0; padding: 16px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--sunken); font-size: 14px; line-height: 1.7; }
.code-pane .code-note { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (max-width: 700px) { .bar-row { grid-template-columns: 1fr 72px; } .bar-track { grid-column: 1 / -1; order: 3; } .ws-pane { padding: 14px 12px 6px; } }

/* Python syntax colors (highlight.js token classes). Dark palette with distinct keyword, string, number, and comment colors. */
.hljs { color: #d7e2fa; background: transparent; }
.hljs-keyword, .hljs-built_in, .hljs-literal { color: #d0adff; }
.hljs-string, .hljs-subst { color: #8cf2f5; }
.hljs-number { color: #c4a0ff; }
.hljs-comment { color: #a2b5d8; font-style: italic; }
.hljs-title, .hljs-title.function_ { color: #88cfff; }
.hljs-params, .hljs-variable { color: #d7e2fa; }
.hljs-meta { color: #e4c5ff; }

.ws-heading { flex-wrap: wrap; }
.ws-heading h2, .ws-heading h3 { min-width: 0; flex: 1 1 160px; }
.ws-heading button { flex: 0 0 auto; }

/* Shared state views (player/static/js/statekit.js): Bloch sphere, amplitude bars, entanglement meter. */
.state-view { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--line, #24365f); border-radius: 12px; background: var(--panel, #061232); }
.state-view-title { margin: 0 0 0.5rem; font-weight: 600; }
.state-view-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: center; }
.state-view-row .bloch { width: 220px; max-width: 100%; height: auto; }
.state-view-pair { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center; }
.state-view-pair .bloch { width: 150px; }
.amp-bars { flex: 1 1 100%; overflow-x: auto; }
.amp-bars svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.ent-meter svg { display: block; width: 260px; max-width: 100%; height: auto; }
.state-view-caption { margin: 0.5rem 0 0; font-size: 0.95rem; color: var(--muted, #acbddf); }
@media (max-width: 480px) { .state-view-row .bloch { width: 160px; } .state-view-pair .bloch { width: 110px; } }
.state-view-legend { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted, #acbddf); }

.complex-state-view .bloch-sphere { --bloch-shine: #245f81; --bloch-middle: #233765; --bloch-edge: #221c49; --bloch-grid: #879deb; --bloch-x: #ff9b9b; --bloch-y: #69e5bf; --bloch-z: #c1a1ff; --bloch-vector: #ffd166; }
.complex-state-view .bloch-sphere text { stroke: var(--panel); stroke-width: 3px; }
.complex-state-view .bloch-zero-note { max-width: 26ch; margin: 4px 0; color: var(--muted); font-size: 13px; }
html[data-theme="light"] .complex-state-view .bloch-sphere { --bloch-shine: #f0fdff; --bloch-middle: #dceafc; --bloch-edge: #d8ccf2; --bloch-grid: #7165ac; --bloch-x: #b91c1c; --bloch-y: #047857; --bloch-z: #6d28d9; --bloch-vector: #a34205; }

.complex-state-view .state-probabilities h3 { font-size: 16px; margin: 12px 0 4px; }
.complex-state-view .state-probability-row { display: grid; grid-template-columns: minmax(4ch, auto) minmax(64px, 1fr) minmax(7ch, auto); gap: 10px; align-items: center; margin: 6px 0; font-variant-numeric: tabular-nums; }
.complex-state-view .state-probability-track { height: 12px; background: var(--raised); border: 1px solid var(--border-strong); }
.complex-state-view .state-probability-track > div { height: 100%; background: var(--green); }
.complex-state-view .state-amplitude-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.complex-state-view .state-amplitude-grid section { padding: 10px; border: 1px solid var(--border); min-width: 0; }
.complex-state-view .state-amplitude-grid h4 { font-size: 14px; margin: 0; }
.complex-state-view .state-amplitude-grid svg { display: block; max-width: 100%; height: auto; }
.complex-state-view .state-amplitude-grid svg text { fill: var(--text); font-size: 13px; }
.complex-state-view .state-complex-axis { stroke: var(--border-strong); stroke-width: 1.5; }
.complex-state-view .state-complex-arrow { stroke: var(--green); stroke-width: 3; }
.complex-state-view .state-complex-tip { fill: var(--green); }
.complex-state-view .state-complex-amplitudes, .complex-state-view .state-amplitude-details { margin: 14px 0; }
.complex-state-view summary { cursor: pointer; font-size: 14px; }
.complex-state-view .state-probabilities > div, .complex-state-view .state-amplitude-grid { max-height: 360px; overflow-y: auto; }
.complex-state-view .state-overview-mode { display: block; margin: 8px 0; }
.complex-state-view .state-complex-amplitudes h3 { font-size: 16px; }

.state-bloch-grid { display: flex; flex-wrap: wrap; gap: 1rem; }