/* Opt-in diagram controls. Loaded only by CCM and A117.1 lesson pages. */
figure.course-fig[data-visual-steps] { overflow: hidden; }
.visual-viewport { overflow: auto; max-width: 100%; border-radius: 8px; }
.visual-table-viewport { max-width: 100%; overflow-x: auto; }
.visual-table-viewport table { min-width: 600px; }
.visual-table-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.visual-viewport:focus-visible, .visual-controls button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.visual-viewport.is-enlarged svg { min-width: 860px; }
.visual-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.visual-controls button { min-height: 44px; padding: 8px 13px; border: 1px solid var(--accent); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: .9rem; cursor: pointer; }
.visual-controls button:hover { background: var(--tint); }
.visual-controls button:disabled { opacity: .45; cursor: default; }
.visual-controls button[aria-pressed="true"] { border-width: 2px; background: var(--tint); }
.visual-status { flex-basis: 100%; margin: 2px 0; color: var(--ink); font-size: .95rem; line-height: 1.5; }
.visual-hint { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.visual-focus { fill: none; stroke: var(--accent-warm); stroke-width: 2; stroke-dasharray: 6 3; pointer-events: none; }
.visual-selected { text-decoration: underline; text-decoration-thickness: 1px; }
figure.course-fig .cpm-id { font-size: 22px; }
/* Keep white labels on dark fills in the older CCM diagrams. */
:root[data-theme="dark"] figure.course-fig .dm-o,
:root[data-theme="dark"] figure.course-fig .dm-b,
:root[data-theme="dark"] figure.course-fig .dm-w,
:root[data-theme="dark"] figure.course-fig .dm-g,
:root[data-theme="dark"] figure.course-fig .cl-m1,
:root[data-theme="dark"] figure.course-fig .cl-m2,
:root[data-theme="dark"] figure.course-fig .pm-charter,
:root[data-theme="dark"] figure.course-fig .rr-dk1,
:root[data-theme="dark"] figure.course-fig .rr-dk2 { fill: var(--tint); stroke: var(--accent); stroke-width: 1.5; }
:root[data-theme="dark"] figure.course-fig .dm-w,
:root[data-theme="dark"] figure.course-fig .cl-m2,
:root[data-theme="dark"] figure.course-fig .rr-dk2 { stroke: var(--accent-warm); }
:root[data-theme="dark"] figure.course-fig .cl-clue { fill: var(--tint); }
:root[data-theme="dark"] figure.course-fig .lod-box { fill: var(--tint); stroke: var(--accent); }
:root[data-theme="dark"] figure.course-fig .lod-label { fill: var(--ink); }
:root[data-theme="dark"] figure.course-fig .lod-sub { fill: var(--muted); }
@media (prefers-reduced-motion: reduce) { .visual-viewport *, .visual-controls * { animation: none !important; transition: none !important; } }
@media print { .visual-controls, .visual-hint { display: none; } .visual-viewport { overflow: visible; } .visual-viewport.is-enlarged svg { min-width: 0; } .visual-focus { display: none; } }