/* Ports & cables workbench (lesson 10, modules 5-7): mounted by windows/lab3.html and macos/lab3.html. Everything is
   scoped under .plab; the site's light palette; drawings are SVG. */
.plab { --pl-ink: #1d1d1f; --pl-mut: #6e6e73; --pl-line: #d2d2d7; --pl-soft: #f5f5f7; --pl-blue: #0071e3; --pl-ok: #1d9e55; --pl-bad: #c4302b; --pl-warn: #bf4800;
  color: var(--pl-ink); background: #fff; border: 1px solid var(--pl-line); border-radius: 14px; padding: 16px; font: 14px/1.5 -apple-system, "Segoe UI", system-ui, Tahoma, sans-serif; }
.plab *, .plab *::before, .plab *::after { box-sizing: border-box; }
.plab .pl-head h3 { margin: 0 0 4px; font-size: 18px; font-weight: 650; }
.plab .pl-head p { margin: 0 0 12px; color: var(--pl-mut); font-size: 13px; }
.plab .pl-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--pl-line); margin-bottom: 14px; }
.plab .pl-tab { appearance: none; border: 0; background: none; color: var(--pl-mut); font: inherit; font-weight: 600; padding: 9px 12px 10px; min-height: 40px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.plab .pl-tab:hover { color: var(--pl-ink); }
.plab .pl-tab.on { color: var(--pl-ink); border-bottom-color: var(--pl-ink); }
.plab .pl-tick { color: var(--pl-ok); }
.plab .pl-help { margin: 0 0 10px; color: var(--pl-mut); font-size: 13px; }
.plab .pl-split { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.plab .pl-devs { display: flex; flex-direction: column; gap: 8px; }
.plab .pl-halves { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plab .pl-dev { margin: 0; background: var(--pl-soft); border-radius: 10px; padding: 6px 6px 4px; }
.plab .pl-dev svg { display: block; width: 100%; height: auto; direction: ltr; overflow: visible; }
.plab .pl-dev figcaption { font-size: 12px; color: var(--pl-mut); text-align: center; padding: 2px 0 0; }
.plab .pl-port { cursor: pointer; outline: none; }
.plab .pl-hit { fill: transparent; stroke: transparent; stroke-width: 1.5; }
.plab .pl-port:hover .pl-hit, .plab .pl-port:focus-visible .pl-hit { fill: rgba(0, 113, 227, .08); stroke: var(--pl-blue); }
.plab .pl-port.found .pl-hit { stroke: rgba(29, 158, 85, .55); }
.plab .pl-port.hl .pl-hit { fill: rgba(0, 113, 227, .12); stroke: var(--pl-blue); stroke-width: 2; animation: pl-pulse 1.6s ease-in-out infinite; }
@keyframes pl-pulse { 50% { stroke-opacity: .25; } }
.plab .pl-tag { font: 600 10px/1 -apple-system, "Segoe UI", system-ui, sans-serif; fill: var(--pl-ok); paint-order: stroke; stroke: #fff; stroke-width: 2.2px; }
.plab .pl-call { display: flex; gap: 10px; align-items: flex-start; background: var(--pl-soft); border-radius: 12px; padding: 12px; margin-bottom: 8px; }
.plab .pl-call q { display: block; margin-top: 4px; font-size: 15px; quotes: "“" "”"; }
.plab[dir="rtl"] .pl-call q { quotes: "«" "»"; }
.plab .pl-call.done { color: var(--pl-ok); }
.plab .pl-call-ico { font-size: 20px; line-height: 1; }
.plab .pl-count { margin: 8px 0 0; color: var(--pl-mut); }
.plab .pl-btn { appearance: none; font: inherit; font-weight: 600; min-height: 40px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink); cursor: pointer; }
.plab .pl-btn:hover { background: var(--pl-soft); }
.plab .pl-btn.ghost { border-color: transparent; color: var(--pl-blue); padding-inline: 8px; }
.plab .pl-btn.on { background: #e8e8ed; border-color: #b8b8bf; }
.plab .pl-msg { min-height: 1.5em; margin: 10px 0 0; font-size: 13px; }
.plab .pl-msg.good { color: var(--pl-ok); }
.plab .pl-msg.bad { color: var(--pl-bad); }
.plab .pl-msg.info { color: var(--pl-mut); }
.plab .pl-q { margin: 0 0 8px; }
.plab .pl-opts { display: flex; flex-direction: column; gap: 8px; }
.plab .pl-opt { appearance: none; font: inherit; text-align: start; min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink); cursor: pointer; }
.plab .pl-opt:hover { background: var(--pl-soft); }
.plab .pl-opt.good { border-color: var(--pl-ok); background: #eef8f1; }
.plab .pl-opt.bad { border-color: var(--pl-bad); background: #fdf0ef; }
.plab .pl-nav { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 10px; color: var(--pl-mut); font-size: 13px; }
.plab .pl-connect { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.plab .pl-tray { display: flex; flex-direction: column; gap: 6px; }
.plab .pl-tray h4, .plab .pl-tgts h4 { margin: 0 0 2px; font-size: 13px; color: var(--pl-mut); font-weight: 600; }
.plab .pl-chip { appearance: none; font: inherit; display: flex; align-items: center; gap: 10px; text-align: start; min-height: 62px; padding: 5px 12px 5px 6px; border-radius: 10px; border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.plab .pl-chip:hover { background: var(--pl-soft); }
.plab .pl-chip.sel { border-color: var(--pl-blue); box-shadow: 0 0 0 2px rgba(0, 113, 227, .18); }
.plab .pl-cg { width: 170px; height: 52px; flex: none; direction: ltr; }
.plab .pl-cp { display: block; width: 100%; height: auto; direction: ltr; grid-column: 1 / -1; }
.plab .pl-tgts { display: flex; flex-direction: column; gap: 8px; }
.plab .pl-tgt { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--pl-line); background: #fff; }
.plab .pl-tgt.over { border-color: var(--pl-blue); background: #f2f7fe; }
.plab .pl-tgt.ok { border-color: var(--pl-ok); }
.plab .pl-tgt.bad { border-color: var(--pl-bad); }
.plab .pl-ico { width: 44px; height: 33px; color: var(--pl-ink); }
.plab .pl-tgt-txt b { display: block; }
.plab .pl-tgt-txt small { display: block; color: var(--pl-mut); font-size: 12px; }
.plab .pl-drop { grid-column: 1 / -1; appearance: none; font: inherit; min-height: 42px; border: 1.5px dashed #b8b8bf; border-radius: 10px; background: var(--pl-soft); color: var(--pl-mut); cursor: pointer; }
.plab .pl-drop:hover { border-color: var(--pl-blue); color: var(--pl-blue); }
.plab .pl-plug { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 6px 6px 4px 10px; border-radius: 10px; background: var(--pl-soft); }
.plab .pl-plug span { font-weight: 600; }
.plab .pl-tgt.ok .pl-plug span { color: var(--pl-ok); }
.plab .pl-tgt.bad .pl-plug span { color: var(--pl-bad); }
.plab .pl-x { appearance: none; border: 0; background: none; font-size: 20px; line-height: 1; width: 40px; height: 40px; border-radius: 8px; color: var(--pl-mut); cursor: pointer; }
.plab .pl-x:hover { background: #e8e8ed; color: var(--pl-ink); }
.plab .pl-needs { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--pl-soft); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.plab .pl-needs span { color: var(--pl-mut); }
.plab code { font: 600 12.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
.plab .pl-cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plab .pl-case { border: 1px solid var(--pl-line); border-radius: 12px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.plab .pl-case.ok { border-color: var(--pl-ok); }
.plab .pl-case.bad { border-color: var(--pl-bad); }
.plab .pl-brick { background: #2b2f36; color: #e9eaee; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 3px; min-height: 92px; }
.plab .pl-brick-n { font-size: 11px; color: #a9aeb6; }
.plab .pl-brick code { color: #f3f4f6; font-weight: 500; font-size: 12px; }
.plab .pl-yn { display: flex; gap: 6px; flex-wrap: wrap; }
.plab .pl-yn .pl-btn { flex: 1 1 auto; }
.plab .pl-why { margin: 0; font-size: 12.5px; }
.plab .pl-case.ok .pl-why { color: var(--pl-ok); }
.plab .pl-case.bad .pl-why { color: var(--pl-bad); }
.plab .pl-tip { margin: 12px 0 0; color: var(--pl-warn); font-size: 13px; }
.pl-ghost { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: #fff; border: 1px solid #0071e3; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font: 600 13px -apple-system, "Segoe UI", system-ui, sans-serif; color: #1d1d1f; }
.pl-ghost .pl-cg { width: 170px; height: 52px; direction: ltr; }
@media (max-width: 760px) {
  .plab { padding: 12px; }
  .plab .pl-split, .plab .pl-connect { grid-template-columns: 1fr; }
  .plab .pl-cases { grid-template-columns: 1fr; }
  .plab .pl-tab { padding-inline: 10px; }
  .plab .pl-cg { width: 150px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .plab .pl-port.hl .pl-hit { animation: none; }
}