/* Same white surfaces, blue actions and thin grey rules as the course shell. */
.interface-hit { fill: transparent; stroke: none; }
.block-reference-diagram a:hover .interface-hit,
.block-reference-diagram a:focus-visible .interface-hit,
.block-reference-diagram a[aria-current] .interface-hit { fill: var(--hover); stroke: var(--accent); }
.block-reference-table tr[id] { scroll-margin-top: 2rem; }
.block-reference-table tr:target, .block-reference-table tr.interface-selected { outline: 2px solid var(--accent); outline-offset: -2px; }
.interface-readout { border: 1px solid var(--line); border-left: 3px solid var(--accent); padding: .8rem 1rem; margin: .7rem 0; border-radius: 4px; font-size: .88rem; background: var(--surface); }
.interface-readout[hidden], .connection-controls[hidden] { display: none; }
.interface-readout p { margin: .35rem 0; }
.interface-readout a { font-size: .8rem; }
.connection-explorer { margin: 1rem 0; border: 1px solid var(--line); border-radius: 4px; padding: 1rem; background: var(--surface); }
.connection-explorer h3 { margin: 0 0 .35rem; font-size: 1rem; }
.connection-explorer figcaption p, .connection-explorer .wiki-note { font-size: .82rem; margin: .5rem 0; }
.connection-explorer svg { width: 100%; height: auto; display: block; }
.connection-canvas { overflow-x: auto; }
.connection-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.connection-pan-note { display: none; }
.connection-explorer svg text { font-family: Arial, Helvetica, sans-serif; font-size: 15px; fill: var(--text); pointer-events: none; }
.connection-explorer svg text.connection-small { font-size: 11px; fill: var(--muted); }
.connection-explorer svg a rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.connection-explorer svg a:hover rect, .connection-explorer svg a:focus-visible rect,
.connection-explorer svg a[aria-current] rect { stroke: var(--accent); stroke-width: 2.5; }
.connection-explorer .plate-outline { fill: none; stroke: var(--line-strong); }
.connection-explorer .coolant-link { fill: none; stroke: var(--accent); stroke-width: 2.5; pointer-events: none; }
.connection-explorer marker path { fill: var(--accent); }
.connection-explorer .thermal-link { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.connection-controls { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .78rem; margin: .5rem 0; }
.connection-controls span { margin-right: .35rem; }
.connection-controls button { font: inherit; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); color: var(--text); padding: .45rem .7rem; cursor: pointer; }
.connection-controls button[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); font-weight: 700; }
.connection-direction { font-size: .82rem; color: var(--accent); margin: .2rem 0; }
.connection-concepts { display: flex; flex-wrap: wrap; gap: .45rem 1rem; border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .8rem; font-size: .8rem; }
@media (max-width: 600px) {
  .connection-explorer { padding: .7rem; }
  .connection-explorer svg { min-width: 580px; }
  .connection-pan-note { display: block; color: var(--muted); font-size: .75rem; margin: .3rem 0; }
}