/* Data centre cabling page: plugs and cables in the figures, the airflow drawing, the three tools and the tables */

/* ---------- figure text and shapes ---------- */
.motion-svg .dcc-mono{font-family:var(--font-mono);font-size:12.5px;fill:var(--ink);text-anchor:start}
.motion-svg .dcc-mono.o{fill:var(--orange-strong)}
.motion-svg .dcc-mono.b{font-family:var(--font-body);font-weight:700;font-size:13px}
.motion-svg .dcc-mono.mid{text-anchor:middle}
.dcc-plug{stroke-width:1.5}
.dcc-plug.cu{fill:#FED7AA;stroke:var(--orange)}
.dcc-plug.op{fill:#CFFAFE;stroke:var(--cyan)}
.dcc-plug.tx{fill:#EDE9FE;stroke:var(--purple)}
.dcc-twinax{fill:none;stroke:#B45309;stroke-width:9;stroke-linecap:round}
.dcc-twinax.thin{stroke-width:5;stroke:#D97706}
.dcc-chip{fill:var(--navy-2);stroke:var(--orange);stroke-width:1}
.dcc-port{fill:#fff;stroke:var(--line-strong);stroke-width:1.2}
.dcc-fail{fill:rgba(225,29,72,.08);stroke:#E11D48;stroke-width:1.5;stroke-dasharray:5 4}
.dcc-head.b{fill:var(--blue)}
.dcc-head.p{fill:var(--pink)}
.dcc-mgr{fill:#F1F5F9;stroke:var(--line-strong);stroke-width:1.2}

/* ---------- tools ---------- */
.dcc-tool{margin-top:28px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.dcc-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.dcc-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.dcc-tool-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:24px;margin-top:14px;align-items:start}
.dcc-tool-grid > *{min-width:0}
.dcc-in{display:grid;gap:12px;align-content:start}
.dcc-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.dcc-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.dcc-field select,.dcc-field input{font:inherit;font-weight:500;font-size:.92rem;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);max-width:100%;width:100%}
.dcc-field input{font-family:var(--font-mono)}
.dcc-out{min-width:0}
.dcc-out .table-wrap{margin-top:0}
.dcc-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:12px 0 0;font-size:.92rem}
.dcc-dl dt{color:var(--muted)}
.dcc-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.dcc-dl dd code{font-size:.86em}
.dcc-verdict{margin:0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.dcc-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.dcc-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.dcc-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.dcc-csv{max-height:220px}
.no-js .dcc-tool .dcc-in{opacity:.7}
.no-js .dcc-tool .dcc-small:first-of-type::after{content:" Scripts are off, so this shows a worked example."}

/* ---------- configs and lists ---------- */
.cfg-wrap{margin-top:22px}
.cfg-cap{font-size:.9rem;color:var(--muted);margin:0 0 8px}
.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}
.key-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-note{margin-top:8px}
.sub-title{margin:30px 0 12px}
.table-wrap > table.dcc-narrow{min-width:0}

@media (max-width:1000px){
  .key-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .dcc-tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .key-points.four{grid-template-columns:1fr}
  .dcc-tool{padding:16px}
  .dcc-dl{grid-template-columns:1fr;gap:2px}
  .dcc-dl dd{margin-bottom:8px}
}
@media (max-width:420px){
  .dcc-two{grid-template-columns:1fr}
}

/* ---------- tables stack into labelled cards on phones ---------- */
@media (max-width:700px){
  .table-wrap > table.dcc-stack{min-width:0}
  .dcc-stack,.dcc-stack tbody,.dcc-stack tr,.dcc-stack td{display:block;width:100%}
  .dcc-stack thead{display:none}
  .dcc-stack tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .dcc-stack td{border:0;padding:3px 0}
  .dcc-stack td:first-child{font-weight:600;color:var(--ink);padding-bottom:6px}
  .dcc-stack td:not(:first-child)::before{content:attr(data-label);display:block;margin-top:4px;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle)}
  .dcc-stack code{overflow-wrap:anywhere}
}