/* Cisco IOS and Catalyst page: figure text, the image and version decoder, the config hardening check and config blocks */

/* ---------- figure text ---------- */
.motion-svg .ios-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink)}
.motion-svg .ios-mono.o{fill:var(--orange-strong);font-weight:600}
.motion-svg .ios-mono.p{fill:var(--purple-strong);font-weight:600}
.motion-svg .ios-mono.t{fill:var(--teal-strong);font-weight:600}
.motion-svg .ios-mono.st{font-size:15px;font-weight:700;fill:var(--subtle)}
.motion-svg .ios-mono.st.o{fill:var(--orange-strong)}
.motion-svg .ios-mono.st.g{fill:#15803D}
.hero-art .ln.blue{stroke:var(--blue)}

/* ---------- tools ---------- */
.ios-tool{margin-top:26px}
.ios-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.ios-small{font-size:.9rem;color:var(--muted);margin:12px 0 0;max-width:80ch}
.ios-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;margin-top:14px;align-items:start}
.ios-tool-grid > *{min-width:0}
.ios-in{display:grid;gap:12px;align-content:start}
.ios-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.ios-field input,.ios-in textarea{font-family:var(--font-mono);font-weight:500;font-size:.86rem;padding:9px 11px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box}
.ios-in textarea{line-height:1.5;resize:vertical;min-height:15em}
.ios-field input:focus,.ios-in textarea:focus{outline:2px solid var(--orange);outline-offset:1px}
.ios-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;font-size:.92rem}
.ios-dl dt{color:var(--muted)}
.ios-dl dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.ios-dl dd code{font-size:.84rem}
.ios-verdict{margin:14px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.ios-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.ios-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.ios-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.ios-btns{display:flex;flex-wrap:wrap;gap:8px}
.ios-btn{font:inherit;font-size:.88rem;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer}
.ios-btn:hover{border-color:var(--orange-border);color:var(--orange-strong)}
.ios-btn.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.ios-btn.primary:hover{background:var(--orange-hover);color:#fff}
.ios-findings{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:.9rem}
.ios-findings li{padding:8px 10px 8px 34px;border-radius:10px;border:1px solid var(--line);background:var(--surface);position:relative;overflow-wrap:anywhere}
.ios-findings li::before{position:absolute;left:11px;top:8px;font-weight:700;font-family:var(--font-mono)}
.ios-findings li.bad{border-color:#FECDD3;background:#FFF1F2}
.ios-findings li.bad::before{content:"✕";color:#BE123C}
.ios-findings li.warn{border-color:#FDE68A;background:#FFFBEB}
.ios-findings li.warn::before{content:"!";color:#B45309}
.ios-findings li.ok{border-color:#99F6E4;background:#F0FDFA}
.ios-findings li.ok::before{content:"✓";color:#0F766E}
.ios-findings b{margin-right:4px;color:var(--ink)}
.no-js .ios-js{display:none}

/* ---------- configs and tables ---------- */
.cfg-wrap{margin-top:22px;min-width:0}
.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}
.ios-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ios-two > *{min-width:0}
.table-wrap .ios-narrow{min-width:0}
.key-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:1000px){
  .key-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ios-tool-grid,.ios-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .key-points.four{grid-template-columns:1fr}
  .ios-dl{grid-template-columns:1fr;gap:2px}
  .ios-dl dd{margin-bottom:8px}
  .ios-narrow td{overflow-wrap:anywhere}
  .table-wrap > table.ios-stack{min-width:0}
  .ios-stack thead{display:none}
  .ios-stack,.ios-stack tbody,.ios-stack tr,.ios-stack td{display:block;width:100%}
  .ios-stack tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .ios-stack td{border:0;padding:2px 0;overflow-wrap:anywhere}
  .ios-stack td:first-child{font-weight:600;color:var(--ink)}
  .ios-stack td[data-l]::before{content:attr(data-l) ": ";font-weight:600;color:var(--muted)}
}