/* Ways in (v2 "Daylight", 29 Oct 2026): a vertical tablist of the ways to reach lab devices, each patched with its
   own coloured lead into an RJ45 socket, beside the real recording of that way. Shared by the home page and the
   native access page. The patch bay wrapper lets js/ways.mjs draw the leads from a source window into the sockets;
   under 1024 px the leads are hidden and the list becomes a row of chips. */
/* ---------- Patch bay: hero + ways in share one layer for the leads ---------- */
.patchbay{position:relative;isolation:isolate}
.patchbay>section{position:relative;z-index:1}
.patchbay__leads{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.patchbay__leads path{fill:none;stroke-width:5;stroke-linecap:round}
.patchbay__leads .lead-shade{stroke:rgba(16,24,40,.08);stroke-width:7}
/* In the dark the leads carry a soft glow of their own colour, like lit fibre. */
:root[data-theme=dark] .patchbay__leads path:not(.lead-shade){filter:drop-shadow(0 0 5px currentColor)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .patchbay__leads path:not(.lead-shade){filter:drop-shadow(0 0 5px currentColor)}}
:root[data-theme=dark] .patchbay__leads .lead-shade{stroke:rgba(0,0,0,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .patchbay__leads .lead-shade{stroke:rgba(0,0,0,.35)}}
.patchbay__leads .plug{stroke:none}
.patchbay__leads .packet{fill:#fff;stroke-width:3;opacity:0;filter:drop-shadow(0 1px 2px rgba(16,24,40,.25))}

/* ---------- Ways in ---------- */
.ways{padding:clamp(120px,14vw,200px) 0 var(--s-10)}
.ways__head{grid-area:head;display:grid;gap:var(--s-4);max-width:30.5em}
.ways__grid{display:grid;grid-template-columns:minmax(0,4.1fr) minmax(0,7.9fr);grid-template-areas:"list head" "list panels";column-gap:var(--s-9);row-gap:var(--s-7);align-items:start}
.ways__list{grid-area:list}
.ways__panels{grid-area:panels}
.ways__list{display:grid;gap:6px}
.way{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;width:100%;padding:14px 14px 14px 18px;border:1px solid transparent;border-radius:var(--r-card);background:transparent;text-align:left;cursor:pointer;color:var(--c-ink-2);transition:background-color .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.way:hover{background:var(--c-canvas-2)}
.way[aria-selected=true]{background:var(--c-surface);border-color:var(--c-line);box-shadow:var(--shadow-card),0 10px 24px -14px rgba(0,0,0,.28);color:var(--c-ink)}
.way__text{display:grid;gap:2px}
.way__text strong{font-size:16.5px;font-weight:600;letter-spacing:-.012em;color:var(--c-ink)}
.way__text span{font-size:14.5px;line-height:1.4;color:var(--c-ink-3)}
/* An RJ45 socket with the lead's plug in it (every way is patched; the chosen one has its link LED lit). */
.way__port{position:relative;display:grid;grid-template-columns:auto 8px;gap:8px;align-items:center}
.way__plug{position:relative;display:block;width:42px;height:32px;border-radius:7px;background:var(--c-socket);box-shadow:inset 0 1px 2px rgba(0,0,0,.22),0 0 0 1px var(--c-line)}
.way__plug::before{content:'';position:absolute;left:7px;right:7px;top:6px;bottom:6px;border-radius:4px;background:var(--k);box-shadow:inset 0 -4px 0 rgba(0,0,0,.16),inset 0 2px 0 rgba(255,255,255,.22)}
.way__plug::after{content:'';position:absolute;left:12px;right:12px;top:9px;height:3px;border-radius:2px;background:rgba(255,255,255,.55)}
.way__led{display:block;width:8px;height:8px;border-radius:50%;background:var(--c-socket-2);box-shadow:inset 0 -1px 1px rgba(0,0,0,.2)}
.way[aria-selected=true] .way__led{background:var(--c-led);box-shadow:0 0 0 3px var(--c-led-glow),0 0 10px var(--c-led-glow)}
.ways__panels{position:relative;min-width:0;display:grid;gap:var(--s-8)}
/* Before the module runs (html.js is set in the head), show only the chosen panel; without script, all of them. */
html.js .ways__grid:not(.is-ready) .way-panel:not(:first-child){display:none}
.ways__grid.is-ready .ways__panels{display:block}
.way-panel{display:grid;gap:var(--s-4)}
.way-panel:focus-visible{outline:2px solid var(--c-focus);outline-offset:6px;border-radius:var(--r-win)}
/* A recorded terminal printed as text, where a way has no clip yet (the console server's own help lines). */
.way-term{position:absolute;inset:0;margin:0;padding:clamp(18px,3vw,36px);overflow:auto;background:var(--c-term-bg);color:var(--c-term-fg);font:400 clamp(12px,1.25vw,15.5px)/1.65 var(--f-mono);white-space:pre}
.way-term__p{color:var(--c-ink-3)}
.way-panel__cap{font-size:15px;color:var(--c-ink-3)}
@media (prefers-reduced-motion:no-preference){
 .way-panel:not([hidden]){animation:panel-in .38s var(--ease-out)}
 @keyframes panel-in{from{opacity:0;transform:translateY(10px)}}
}

@media (max-width:1023px){
 .ways{padding-top:var(--s-9)}
 .ways__grid{grid-template-columns:1fr;grid-template-areas:"head" "list" "panels";row-gap:var(--s-5)}
 .ways__list{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-snap-type:x mandatory;scrollbar-width:none}
 .ways__list::-webkit-scrollbar{display:none}
 .way{flex:none;grid-template-columns:auto auto;gap:10px;width:auto;padding:9px 12px 9px 14px;border-color:var(--c-line);scroll-snap-align:start}
 .way__text span{display:none}
 .way__text strong{font-size:15px;white-space:nowrap}
 .way__port{grid-template-columns:auto;order:-1}
 .way__plug{width:26px;height:20px;border-radius:5px}
 .way__plug::before{left:4px;right:4px;top:4px;bottom:4px}
 .way__plug::after{display:none}
 .way__led{display:none}
 .patchbay__leads{display:none}
}
@media (forced-colors:active){
 .way[aria-selected=true]{outline:2px solid Highlight}
 .way__plug::after{forced-color-adjust:none}
}