/* QoS and traffic shaping page: figure text, class colours, the four tools and the platform tabs */

/* ---------- figure text and shapes ---------- */
.motion-svg .qs-ex{font-size:13px;fill:var(--ink);text-anchor:middle}
.motion-svg .qs-ex.o{fill:var(--orange-strong);font-weight:600}
.motion-svg .qs-ex.t{fill:var(--teal-strong);font-weight:600}
.motion-svg .qs-ex.c{fill:var(--cyan-strong);font-weight:600}
.motion-svg .qs-ex.p{fill:var(--purple-strong);font-weight:600}
.motion-svg .qs-ex.k{fill:#A21CAF;font-weight:600}
.motion-svg .qs-segt{font-size:12px;font-weight:700;fill:#fff;text-anchor:middle}
.motion-svg .qs-lg{font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .qs-lgm{font-family:var(--font-mono);font-size:12px;fill:var(--muted);text-anchor:start}
.motion-svg .qs-lgm.o{fill:var(--orange-strong);font-weight:600}
.motion-svg .qs-rowt{font-size:12px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .qs-rowt.sm{font-size:11px}
.motion-svg .qs-rows{font-family:var(--font-mono);font-size:12px;fill:var(--muted);text-anchor:start}
.motion-svg .qs-rows.o{fill:var(--orange-strong);font-weight:600}
.motion-svg .qs-tot{font-size:13px;font-weight:600;fill:var(--ink);text-anchor:start}
.motion-svg .qs-tot.end{text-anchor:end}
.motion-svg .qs-mono{font-family:var(--font-mono);font-size:13px;fill:var(--ink);text-anchor:start}
.motion-svg .qs-mono.o{fill:var(--orange-strong)}
.qs-ax{font-family:var(--font-mono);font-size:11px;fill:var(--subtle);text-anchor:start;dominant-baseline:central}
.qs-ax.end{text-anchor:end}
.qs-q{stroke:#fff;stroke-width:1}
.qs-thr{stroke:var(--subtle);stroke-width:1.5;stroke-linecap:round}
.qs-veil{fill:rgba(255,255,255,.94)}
.qs-bucket{fill:#F0FDFA;stroke:var(--teal-strong);stroke-width:2.5;stroke-linejoin:round}
.qs-pointer{fill:var(--line-strong)}

/* class colours, shared by the class model bars, the call bars and the legends */
.qs-seg{stroke:#fff;stroke-width:1.5}
.f-o{fill:var(--orange)}
.f-k{fill:var(--pink)}
.f-p{fill:var(--purple)}
.f-b{fill:var(--blue)}
.f-t{fill:var(--teal)}
.f-c{fill:var(--cyan-strong)}
.f-s{fill:#94A3B8}
.f-r{fill:#E11D48}
.f-y{fill:#D97706}
.f-n{fill:var(--navy)}
.f-l{fill:#8B5CF6}
.f-g{fill:#16A34A}

/* ---------- tools ---------- */
.qs-tool{margin-top:26px}
.qs-tool h3{font-size:var(--fs-h4);margin:0 0 8px}
.qs-small{font-size:.9rem;color:var(--muted);margin:10px 0 0;max-width:80ch}
.qs-tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;margin-top:14px;align-items:start}
.qs-tool-grid > *{min-width:0}
.qs-in{display:grid;gap:12px;align-content:start}
.qs-field{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink)}
.qs-field select,.qs-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%}
.qs-field input{width:8rem}
.qs-in .sim-row{grid-template-columns:120px 1fr 78px}
.qs-tool input[type=range]{width:100%;accent-color:var(--orange)}
.qs-bits{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;max-width:360px}
.qs-bit{display:grid;place-items:center;height:38px;border-radius:8px;font-family:var(--font-mono);font-weight:700;font-size:1rem;background:var(--orange-tint);color:var(--orange-strong);border:1px solid var(--orange-border)}
.qs-bit.e{background:#F0FDFA;color:var(--teal-strong);border-color:#99F6E4}
.qs-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:.92rem}
.qs-dl dt{color:var(--muted)}
.qs-dl dd{margin:0;font-weight:600;color:var(--ink);font-family:var(--font-mono);font-size:.86rem;overflow-wrap:anywhere}
.qs-dl dd code{font-size:inherit}
.qs-verdict{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:.92rem;border:1px solid var(--line)}
.qs-verdict.ok{background:#F0FDFA;border-color:#99F6E4}
.qs-verdict.warn{background:#FFFBEB;border-color:#FDE68A}
.qs-verdict.bad{background:#FFF1F2;border-color:#FECDD3}
.no-js .qs-js{display:none}
.qs-share-t td:not(:first-child),.qs-share-t th:not(:first-child){text-align:right;font-family:var(--font-mono)}
.qs-share-t th{font-family:var(--font-body)!important}
.table-wrap .qs-share-t{min-width:0}
.qs-bars{display:grid;gap:6px;margin-top:12px}
.qs-bar{display:grid;grid-template-columns:96px 1fr;gap:8px;align-items:center;font-size:.8rem;color:var(--muted)}
.qs-track{position:relative;height:14px;border-radius:7px;background:#EEF2F6;overflow:hidden}
.qs-track span{position:absolute;left:0;top:0;bottom:0;border-radius:7px}
.qs-track .want{background:#FECDD3}
.qs-track .got{background:var(--teal)}
.qs-track .got.v{background:var(--orange)}
.qs-chart{width:100%;height:auto;display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.qs-axis{stroke:var(--line-strong);stroke-width:1}
.qs-l{fill:none;stroke-width:1.6;stroke-linejoin:round}
.qs-l.off{stroke:#94A3B8}
.qs-l.pol{stroke:var(--orange)}
.qs-l.shp{stroke:var(--teal-strong)}
.legend-row i.qs-k-off{border-top-color:#94A3B8}
.legend-row i.qs-k-pol{border-top-color:var(--orange)}
.legend-row i.qs-k-shp{border-top-color:var(--teal-strong)}

/* ---------- 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}
.qs-facts{margin:0 0 6px;padding-left:20px;display:grid;gap:6px;color:var(--text)}
.qs-panel .table-wrap{margin-top:14px}
.qs-panel code{overflow-wrap:anywhere}
.key-points.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.gap-note{margin-top:8px}

@media (max-width:1000px){
  .key-points.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .qs-tool-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .key-points.four{grid-template-columns:1fr}
  .qs-in .sim-row{grid-template-columns:96px 1fr 70px}
  .qs-dl{grid-template-columns:1fr;gap:2px}
  .qs-dl dd{margin-bottom:8px}
  .qs-share-t .qs-g{display:none}
  .qs-panel table,.qs-panel tbody,.qs-panel tr,.qs-panel td{display:block;width:100%}
  .qs-panel thead{display:none}
  .qs-panel .table-wrap > table{min-width:0}
  .qs-panel td{border:0;padding:2px 0}
  .qs-panel tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .qs-panel td:first-child{font-weight:600;color:var(--ink)}
}