/* Low latency trading networks page: figure text, the three tools, the related work tag and phone tables */

/* ---------- figure text and shapes ---------- */
.motion-svg .ll-pn{font-size:10px;font-weight:700;fill:#fff;text-anchor:middle;dominant-baseline:central}
.motion-svg .ll-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .ll-mono.o{fill:var(--orange-strong)}
.ll-tower{fill:#FFEDD5;stroke:var(--orange);stroke-width:1.5;stroke-linejoin:round}
.ll-axis{stroke:var(--line-strong);stroke-width:2;stroke-dasharray:3 4;fill:none}

/* ---------- related work tag ---------- */
.tag-rel{display:inline-block;margin-left:8px;padding:1px 8px;border:1px solid var(--orange-border);border-radius:999px;font:600 .68rem/1.6 var(--font-body);letter-spacing:.06em;text-transform:uppercase;color:var(--orange-strong);vertical-align:middle}

/* ---------- tools ---------- */
.ll-tool{margin-top:26px}
.ll-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.ll-tool .sim-presets{margin-top:12px}
.ll-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.ll-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:24px;margin-top:14px;align-items:start}
.ll-tool-grid > *{min-width:0}
.ll-in{display:grid;gap:12px;align-content:start;min-width:0}
.ll-in .sim-row{grid-template-columns:110px 1fr 78px}
.ll-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink);min-width:0}
.ll-field select{width:100%}
.ll-field select,.ll-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%}
.ll-field input{width:9rem}
.ll-four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ll-four input{width:100%}
.ll-tool input[type=range]{width:100%;accent-color:var(--orange)}
.ll-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:.92rem}
.ll-dl dt{color:var(--muted)}
.ll-dl dd{margin:0;font-weight:600;color:var(--ink);font-family:var(--font-mono);font-size:.86rem;overflow-wrap:anywhere}
.ll-verdict{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.ll-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.ll-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.ll-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.no-js .ll-js{display:none}
.ll-nojs{display:none}
.no-js .ll-nojs{display:block}
.ll-stack{display:flex;height:18px;border-radius:9px;overflow:hidden;background:#EEF2F6;margin:0 0 8px}
.ll-stack span{display:block;height:100%;min-width:0;transition:width .3s ease}
.ll-b-c{background:var(--cyan)}
.ll-b-p{background:var(--purple)}
.ll-b-o{background:var(--orange)}
.ll-b-t{background:var(--teal)}
.ll-keys{margin:0 0 12px}
.ll-keys i{border-radius:3px;border:0;width:12px;height:12px;box-shadow:none}
.ll-keys i.ll-b-c{background:var(--cyan)}
.ll-keys i.ll-b-p{background:var(--purple)}
.ll-keys i.ll-b-o{background:var(--orange)}
.ll-keys i.ll-b-t{background:var(--teal)}
@media (prefers-reduced-motion:reduce){.ll-stack span{transition:none}}

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

/* ---------- tables and cards ---------- */
.key-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-note{margin-top:8px}
.compare code{font-size:.85em;overflow-wrap:anywhere}

@media (max-width:1000px){
  .key-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ll-tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .key-points.four{grid-template-columns:1fr}
  .ll-in .sim-row{grid-template-columns:90px 1fr 70px}
  .ll-dl{grid-template-columns:1fr;gap:2px}
  .ll-dl dd{margin-bottom:8px}
  /* tables become one card per row, with each cell labelled by its column */
  .table-wrap > table[class*="ll-"]{min-width:0}
  table[class*="ll-"],table[class*="ll-"] tbody,table[class*="ll-"] tr,table[class*="ll-"] td{display:block;width:100%}
  table[class*="ll-"] thead{display:none}
  table[class*="ll-"] tr{padding:12px 0;border-bottom:1px solid var(--line)}
  table[class*="ll-"] td{border:0;padding:2px 0}
  table[class*="ll-"] td:first-child{font-weight:600;color:var(--ink);margin-bottom:4px}
  table[class*="ll-"] td[data-label]::before{content:attr(data-label);display:block;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-top:6px}
}
.motion-svg .ll-capm{text-anchor:middle}