@import '../../network-basics/css/style.css?v=20260920-032225';

.SocketChoices { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 28px; }
.SocketChoice { padding:11px 13px; border:1px solid rgba(117,214,210,.4); background:transparent; color:var(--academy-muted); font:inherit; cursor:pointer; }
.SocketChoice:hover, .SocketChoice:focus-visible, .SocketChoice.is-selected { border-color:var(--academy-lime); color:var(--academy-lime); }
.SocketChoice:focus-visible { outline:2px solid var(--academy-coral); outline-offset:3px; }
.SocketStage { display:grid; grid-template-columns:minmax(150px,1fr) minmax(110px,.8fr) minmax(150px,1fr); gap:14px; align-items:center; padding:24px; border:1px solid rgba(117,214,210,.25); background:rgba(9,20,22,.35); }
.SocketEndpoint { display:grid; gap:8px; min-height:136px; align-content:center; padding:18px 14px; border:1px solid rgba(117,214,210,.6); background:rgba(117,214,210,.1); text-align:center; }
.SocketEndpoint strong { color:var(--academy-lime); font-family:'Orbitron',sans-serif; font-size:.95rem; font-weight:400; }
.SocketEndpoint code { color:var(--academy-paper); font-family:'Orbitron',sans-serif; font-size:.72rem; }
.SocketRole { color:var(--academy-cyan); font-family:'Orbitron',sans-serif; font-size:.65rem; letter-spacing:.08em; }
.SocketClient { border-color:rgba(241,199,91,.65); background:rgba(241,199,91,.1); }
.SocketChannel { position:relative; min-height:2px; background:var(--academy-coral); text-align:center; }
.SocketChannel::before, .SocketChannel::after { position:absolute; top:50%; width:9px; height:9px; border-top:2px solid var(--academy-coral); border-right:2px solid var(--academy-coral); content:''; }
.SocketChannel::before { left:0; transform:translateY(-50%) rotate(-135deg); }
.SocketChannel::after { right:0; transform:translateY(-50%) rotate(45deg); }
.SocketChannel span { position:absolute; left:50%; top:50%; min-width:150px; padding:4px 6px; transform:translate(-50%, -50%); background:rgba(9,20,22,.95); color:var(--academy-muted); font-size:.78rem; }
.SocketStage[data-step='listen'] .SocketChannel { background:rgba(117,214,210,.35); }
.SocketStage[data-step='listen'] .SocketChannel::before, .SocketStage[data-step='listen'] .SocketChannel::after { border-color:rgba(117,214,210,.35); }
.SocketStage[data-step='close'] .SocketChannel { background:rgba(255,111,97,.35); }
.SocketStage[data-step='close'] .SocketChannel::before, .SocketStage[data-step='close'] .SocketChannel::after { border-color:rgba(255,111,97,.35); }
@media (max-width:560px) {
    .SocketStage { grid-template-columns:1fr; gap:28px; padding:16px 10px; }
    .SocketEndpoint { min-height:92px; }
    .SocketChannel { width:2px; min-height:72px; justify-self:center; }
    .SocketChannel::before, .SocketChannel::after { left:50%; top:0; width:9px; height:9px; }
    .SocketChannel::before { transform:translate(-50%, -1px) rotate(-45deg); }
    .SocketChannel::after { top:auto; right:auto; bottom:0; transform:translate(-50%, 1px) rotate(135deg); }
    .SocketChannel span { min-width:140px; }
}