/* Copper cabling page: figure shapes, the three tools, the stacked tables and the photo layout */

/* ---------- figure shapes and text ---------- */
.cu-wire{fill:none;stroke-width:5;stroke-linecap:round}
.cu-wire.a{stroke:var(--orange)}
.cu-wire.b{stroke:var(--purple);opacity:.85}
.motion-svg .cu-ax{font-family:var(--font-mono);font-size:11px;fill:var(--subtle)}
.motion-svg .cu-rowt{font-size:14px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .cu-barv{font-family:var(--font-mono);font-size:12px;font-weight:600;fill:var(--muted);text-anchor:start}
.cu-bar{stroke:none;transition:opacity .3s ease}
.cu-bar.b0{fill:#94A3B8}
.cu-bar.b1{fill:#38BDF8}
.cu-bar.b2{fill:var(--teal)}
.cu-bar.b3{fill:var(--purple)}
.cu-bar.b4{fill:var(--orange)}
.cu-plug{fill:#F8FAFC;stroke:var(--line-strong);stroke-width:2}
.cu-gold{fill:#EAB308;stroke:#A16207;stroke-width:1}
.cu-pin{stroke:#475569;stroke-width:1}
.cu-pin.o{fill:#F97316}
.cu-pin.g{fill:#16A34A}
.cu-pin.b{fill:#2563EB}
.cu-pin.n{fill:#92400E}
.cu-pin.wo{fill:url(#cu-st-o)}
.cu-pin.wg{fill:url(#cu-st-g)}
.cu-pin.wb{fill:url(#cu-st-b)}
.cu-pin.wn{fill:url(#cu-st-n)}
.cu-shade{fill:#F8FAFC;opacity:.82;stroke:none}
.motion-svg .cu-pinno{font-family:var(--font-mono);font-size:13px;font-weight:700;fill:var(--ink)}
.motion-svg .cu-side{font-size:13px;fill:var(--muted);text-anchor:start}
.motion-svg .cu-big{font-family:var(--font-heading);font-size:22px;font-weight:700;fill:var(--ink);text-anchor:start}
.motion-svg .cu-kv{font-size:13.5px;fill:var(--text);text-anchor:start}
.cu-desk{fill:#CBD5E1;stroke:#94A3B8;stroke-width:1}
.cu-sig{fill:var(--orange);opacity:.9}
.cu-cx-jk{fill:#1E293B}
.cu-cx-br{fill:#94A3B8}
.cu-cx-fl{fill:#CBD5E1}
.cu-cx-di{fill:#F8FAFC}
.cu-cx-cu{fill:#C2410C}
.cu-cx-side{fill:#1E293B}
#m-cu-coax .ln.orange{stroke-width:3}

/* ---------- text helpers ---------- */
.cu-small{font-size:.92rem;color:var(--muted);margin:14px 0 0;max-width:82ch}
.cu-split{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:24px;align-items:start}
.cu-split > *{min-width:0}
.cu-photo img{width:100%;height:440px;object-fit:cover;object-position:top;border-radius:var(--radius)}
.cu-photo figcaption{margin-top:10px;font-size:.86rem;color:var(--muted)}

/* ---------- tools ---------- */
.cu-tool{margin-top:28px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.cu-tool h3{font-size:var(--fs-h4);margin:0 0 6px}
.cu-tool > .cu-small{margin-top:0}
.cu-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:16px;align-items:start}
.cu-tool-grid > *{min-width:0}
.cu-in{display:grid;gap:12px;align-content:start}
.cu-field{display:grid;gap:6px;min-width:0;font-size:.88rem;font-weight:600;color:var(--ink)}
.cu-field select,.cu-field input{font:inherit;font-weight:500;font-size:.92rem;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;color:var(--ink);max-width:100%;min-width:0}
.cu-field select{width:100%;text-overflow:ellipsis}
.cu-field input[type=number]{width:9rem}
.cu-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.cu-dl dt{color:var(--muted)}
.cu-dl dd{margin:0;font-weight:700;color:var(--ink)}
.cu-verdict{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid #99F6E4;background:#F0FDFA}
.cu-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.cu-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.cu-meter{height:12px;margin-top:14px;border-radius:999px;background:#EEF2F6;overflow:hidden}
.cu-meter span{display:block;height:100%;max-width:100%;border-radius:999px;background:var(--teal);transition:width .3s ease}
.cu-meter span.warn{background:#F59E0B}
.cu-meter span.bad{background:#E11D48}
.cu-chip{display:inline-block;width:22px;height:12px;margin-right:8px;border-radius:3px;border:1px solid #475569;vertical-align:middle}
.cu-chip.o{background:#F97316}
.cu-chip.g{background:#16A34A}
.cu-chip.b{background:#2563EB}
.cu-chip.n{background:#92400E}
.cu-chip.wo{background:repeating-linear-gradient(45deg,#fff 0 3px,#F97316 3px 6px)}
.cu-chip.wg{background:repeating-linear-gradient(45deg,#fff 0 3px,#16A34A 3px 6px)}
.cu-chip.wb{background:repeating-linear-gradient(45deg,#fff 0 3px,#2563EB 3px 6px)}
.cu-chip.wn{background:repeating-linear-gradient(45deg,#fff 0 3px,#92400E 3px 6px)}
.cu-map-t td.cu-bad{color:#BE123C;font-weight:700}
.table-wrap > table.cu-map-t{min-width:0}
.cu-map-t td{padding:6px 10px}

/* ---------- code ---------- */
.cfg{margin:12px 0 0;padding:16px 18px;background:var(--navy);color:#E2E8F0;border-radius:var(--radius);overflow:auto;font-size:.82rem;line-height:1.65}
.cfg code{font-size:inherit;background:none;color:inherit;padding:0}

/* ---------- tables that stack on phones ---------- */
.cu-stack td code{overflow-wrap:anywhere}

@media (prefers-reduced-motion:reduce){.cu-meter span,.cu-bar{transition:none}}
@media (max-width:860px){
  .cu-tool-grid{grid-template-columns:minmax(0,1fr)}
  .cu-split{grid-template-columns:minmax(0,1fr)}
  .cu-photo img{height:360px}
}
@media (max-width:700px){
  .cu-tool{padding:16px 14px}
  .cu-dl{grid-template-columns:1fr;gap:2px}
  .cu-dl dd{margin-bottom:8px}
  .table-wrap > table.cu-stack{min-width:0}
  .cu-stack,.cu-stack tbody,.cu-stack tr,.cu-stack td{display:block;width:100%}
  .cu-stack thead{display:none}
  .cu-stack tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .cu-stack td{border:0;padding:3px 0}
  .cu-stack td::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
  .cu-stack td:first-child{font-weight:600;color:var(--ink)}
  .cu-stack td:first-child::before{display:none}
}