/* Fibre optics page: fibre drawings, connectors, the colour code, and the three tools */

/* ---------- fibre colour code (TIA-598) ---------- */
.fo-fib.c1,.fo-sw.c1,.fo-buffer.c1,.fo-tube.c1{--fc:#2563EB}
.fo-fib.c2,.fo-sw.c2,.fo-buffer.c2,.fo-tube.c2{--fc:#F97316}
.fo-fib.c3,.fo-sw.c3,.fo-buffer.c3,.fo-tube.c3{--fc:#16A34A}
.fo-fib.c4,.fo-sw.c4,.fo-buffer.c4,.fo-tube.c4{--fc:#92400E}
.fo-fib.c5,.fo-sw.c5,.fo-buffer.c5,.fo-tube.c5{--fc:#64748B}
.fo-fib.c6,.fo-sw.c6,.fo-buffer.c6,.fo-tube.c6{--fc:#F8FAFC}
.fo-fib.c7,.fo-sw.c7{--fc:#DC2626}
.fo-fib.c8,.fo-sw.c8{--fc:#111827}
.fo-fib.c9,.fo-sw.c9{--fc:#FACC15}
.fo-fib.c10,.fo-sw.c10{--fc:#7C3AED}
.fo-fib.c11,.fo-sw.c11{--fc:#F472B6}
.fo-fib.c12,.fo-sw.c12{--fc:#22D3EE}
.fo-strand.c1{stroke:#2563EB}.fo-strand.c2{stroke:#F97316}.fo-strand.c3{stroke:#16A34A}.fo-strand.c4{stroke:#92400E}
.fo-strand.c5{stroke:#64748B}.fo-strand.c6{stroke:#CBD5E1}.fo-strand.c7{stroke:#DC2626}.fo-strand.c8{stroke:#111827}
.fo-strand.c9{stroke:#EAB308}.fo-strand.c10{stroke:#7C3AED}.fo-strand.c11{stroke:#F472B6}.fo-strand.c12{stroke:#22D3EE}
.motion-svg .fo-fib{fill:var(--fc,#94A3B8);stroke:#334155;stroke-width:1}
.motion-svg .fo-strand{fill:none;stroke-width:3;stroke-linecap:round;opacity:.85}
.fo-colours{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.fo-colours li{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:.9rem}
.fo-colours b{font-family:var(--font-mono);font-size:.8rem;color:var(--muted);min-width:1.4em}
.fo-sw{flex:none;width:18px;height:18px;border-radius:50%;background:var(--fc);border:1px solid #334155}

/* ---------- fibre drawings ---------- */
.motion-svg .fo-clad{fill:#F1F5F9;stroke:var(--line-strong);stroke-width:1.5}
.motion-svg .fo-core{stroke:none}
.motion-svg .fo-core.mm{fill:rgba(249,115,22,.14)}
.motion-svg .fo-core.sm{fill:rgba(20,184,166,.35)}
.motion-svg .fo-dot{fill:var(--orange);stroke:#fff;stroke-width:2}
.motion-svg .fo-coat{fill:#E2E8F0;stroke:var(--line-strong);stroke-width:1.5}
.motion-svg .fo-cladc{fill:#F8FAFC;stroke:#94A3B8;stroke-width:1.5}
.motion-svg .fo-corec.mm{fill:rgba(249,115,22,.25);stroke:var(--orange);stroke-width:1.5}
.motion-svg .fo-corec.sm{fill:rgba(20,184,166,.45);stroke:var(--teal);stroke-width:1.5}
.motion-svg .fo-jk{stroke:rgba(15,23,42,.25);stroke-width:1.5}
.motion-svg .fo-jk.orange{fill:#FB923C}
.motion-svg .fo-jk.aqua{fill:#67E8F9}
.motion-svg .fo-jk.lime{fill:#A3E635}
.motion-svg .fo-jk.yellow{fill:#FDE047}
.motion-svg .fo-tl{font-size:14px;font-weight:600;fill:var(--ink)}
.motion-svg .fo-tv{font-size:14px;fill:var(--text)}
.motion-svg .fo-th{font-family:var(--font-heading);font-size:18px;font-weight:700;fill:var(--ink)}
.motion-svg .fo-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .fo-mono.o{fill:var(--orange-strong)}
.motion-svg .fo-jacket{fill:#FDE68A;stroke:#A16207;stroke-width:2}
.motion-svg .fo-aramid{fill:#FEF3C7;stroke:#D97706;stroke-width:2;stroke-dasharray:3 3}
.motion-svg .fo-member{fill:#334155;stroke:#0F172A;stroke-width:1}
.motion-svg .fo-buffer{fill:var(--fc);stroke:#334155;stroke-width:1.2}
.motion-svg .fo-glass{fill:#E0F2FE;stroke:#0284C7;stroke-width:1}
.motion-svg .fo-tube{fill:#fff;stroke:var(--fc,#64748B);stroke-width:4}
.motion-svg .fo-ribbon{fill:#E2E8F0;stroke:#94A3B8;stroke-width:1}
.motion-svg .fo-steel{fill:none;stroke:#64748B;stroke-width:7;stroke-dasharray:4 3}
.motion-svg .fo-inner{fill:#FEF9C3;stroke:#A16207;stroke-width:1.5}
.motion-svg .fo-body{fill:#F1F5F9;stroke:#475569;stroke-width:2}
.motion-svg .fo-inner2{fill:#fff;stroke:#94A3B8;stroke-width:1.5}
.motion-svg .fo-ferrule{fill:#FFFBEB;stroke:#B45309;stroke-width:2}
.motion-svg .fo-latch,.motion-svg .fo-thread{fill:none;stroke:#475569;stroke-width:2;stroke-linecap:round}
.motion-svg .fo-clip{fill:#CBD5E1;stroke:#475569;stroke-width:1.5}
.motion-svg .fo-key{fill:#94A3B8;stroke:#475569;stroke-width:1.5}
.motion-svg .fo-pin{fill:#475569}
.motion-svg .fo-face{fill:none;stroke:#B45309;stroke-width:3}
.motion-svg .fo-panel{fill:#475569}
.motion-svg .fo-port{font-family:var(--font-mono);font-size:13px;font-weight:600;fill:#fff}
.motion-svg .fo-coatbar{fill:#CBD5E1;stroke:#94A3B8;stroke-width:1}
.motion-svg .fo-glassbar{fill:#7DD3FC}
.motion-svg .fo-electrode{fill:#475569}
.motion-svg .fo-arc{fill:none;stroke:var(--orange);stroke-width:3;stroke-linejoin:round}
.motion-svg .fo-sleeve{fill:rgba(124,58,237,.12);stroke:var(--purple);stroke-width:2}
.motion-svg .fo-bar{stroke:#fff;stroke-width:1}
.motion-svg .fo-bar.budget{fill:rgba(20,184,166,.35)}
.motion-svg .fo-bar.fibre{fill:#67E8F9}
.motion-svg .fo-bar.conn{fill:#FDBA74}
.motion-svg .fo-bar.conn.bad{fill:#FDA4AF}
.motion-svg .fo-bar.conn.good{fill:#86EFAC}
.motion-svg .fo-zd{fill:#F8FAFC;stroke:#CBD5E1;stroke-width:1.5}
.motion-svg .fo-zc{fill:#F1F5F9;stroke:#CBD5E1;stroke-width:1.5;stroke-dasharray:4 4}
.motion-svg .fo-zb{fill:#E0F2FE;stroke:#7DD3FC;stroke-width:1.5}
.motion-svg .fo-za{fill:rgba(249,115,22,.18);stroke:var(--orange);stroke-width:1.5}
.motion-svg .fo-dirt{fill:#57534E;opacity:.85}
.motion-svg .fo-evt{fill:#fff;stroke:var(--purple);stroke-width:2}
.hero-art .foh-clad{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.3);stroke-width:2}
.hero-art .foh-core{fill:rgba(20,184,166,.7);stroke:var(--teal);stroke-width:2}

/* ---------- tools ---------- */
.fo-tool{margin-top:26px}
.fo-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.fo-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.fo-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:14px;align-items:start;padding:20px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-xs)}
.fo-tool-grid > *{min-width:0}
.fo-in{display:grid;gap:12px;align-content:start}
.fo-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.fo-field[hidden]{display:none}
.fo-field select,.fo-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%}
.fo-in .sim-row{grid-template-columns:110px 1fr 70px}
.fo-tool input[type=range]{width:100%;accent-color:var(--orange)}
.fo-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:12px 0 0;font-size:.92rem}
.fo-dl dt{color:var(--muted)}
.fo-dl dd{margin:0;font-weight:600;color:var(--ink);font-family:var(--font-mono);font-size:.86rem;overflow-wrap:anywhere}
.fo-verdict{margin:0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.fo-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.fo-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.fo-verdict.bad{background:#FFF1F2;border-color:#FECDD3}

/* ---------- tables ---------- */
.table-wrap .fo-narrow{min-width:0}
.table-wrap .fo-mini{max-width:520px}
.fo-reach td:first-child{font-weight:600;white-space:nowrap;color:var(--ink)}
.fo-reach td{white-space:nowrap}
.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}

@media (max-width:980px){
  .fo-colours{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:860px){
  .fo-tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .fo-colours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-in .sim-row{grid-template-columns:90px 1fr 64px}
  .fo-dl{grid-template-columns:1fr;gap:2px}
  .fo-dl dd{margin-bottom:8px}
  .fo-tool-grid{padding:14px}
}