/* Cisco Nexus and NX-OS page: figure text, the upgrade timeline, the two tools and the configs */

/* ---------- figure text and shapes ---------- */
.motion-svg .nx-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .nx-mono.o{fill:var(--orange-strong)}
.motion-svg .nx-mono.b{font-family:var(--font-body);font-weight:700;font-size:13px}
.motion-svg .nx-mono.mid{text-anchor:middle}
.motion-svg .nx-rowt{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .nx-ax{font-family:var(--font-mono);font-size:12px;fill:var(--muted);text-anchor:start}
.motion-svg .nx-ax.mid{text-anchor:middle}
.motion-svg .nx-ax.w{fill:#fff;font-weight:600;text-anchor:middle}
.nx-sheet{fill:#fff;stroke:var(--purple);stroke-width:1.5;stroke-dasharray:5 4}
.nx-up{fill:#CCFBF1}
.nx-down{fill:#E11D48}
.nx-maybe{fill:#FDA4AF}
.nx-part{fill:#F59E0B}
.nx-axis{stroke:var(--line-strong);stroke-width:1.5;fill:none}

/* ---------- tools ---------- */
.nx-tool{margin-top:28px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}
.nx-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.nx-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.nx-tool-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);gap:24px;margin-top:14px;align-items:start}
.nx-tool-grid > *{min-width:0}
.nx-in{display:grid;gap:12px;align-content:start}
.nx-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.nx-field select,.nx-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%}
.nx-field input{font-family:var(--font-mono)}
.nx-chips{display:flex;flex-wrap:wrap;gap:6px}
.nx-chips button{font:inherit;font-family:var(--font-mono);font-size:.82rem;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);cursor:pointer}
.nx-chips button:hover,.nx-chips button:focus-visible{border-color:var(--orange-border);color:var(--orange-strong)}
.nx-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.nx-dl dt{color:var(--muted)}
.nx-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.nx-dl dd code{font-size:.86em}
.nx-verdict{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.nx-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.nx-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.nx-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.nx-more{margin-top:18px}
.nx-more summary{cursor:pointer;font-weight:600;color:var(--ink)}
.nx-more .table-wrap{margin-top:12px}
.no-js .nx-chips{display:none}

/* ---------- 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}

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

/* ---------- tables stack into labelled cards on phones ---------- */
@media (max-width:700px){
  .table-wrap > table.nx-stack{min-width:0}
  .nx-stack,.nx-stack tbody,.nx-stack tr,.nx-stack td{display:block;width:100%}
  .nx-stack thead{display:none}
  .nx-stack tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .nx-stack td{border:0;padding:3px 0}
  .nx-stack td:first-child{font-weight:600;color:var(--ink);padding-bottom:6px}
  .nx-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)}
  .nx-stack code{overflow-wrap:anywhere}
}