/* Wireshark: Reading One Packet: a screenshot per slide, with numbered marks over it.
   Loads after /slides/slides.css. */

@media (min-width: 861px) { .sv-side .sv-body { grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); } }

/* The sections' colours. */
[data-sec="intro"] { --sec: #334155; }
[data-sec="window"] { --sec: #1d4ed8; }
[data-sec="layers"] { --sec: #047857; }
[data-sec="bytes"] { --sec: #7c3aed; }

.ws-shot { width: 100%; height: auto; max-height: 100%; border: 1px solid var(--sv-line); border-radius: 6px; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.ws-shot .mk { fill: rgba(225, 29, 72, .06); stroke: #e11d48; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.ws-shot .bd circle { fill: #e11d48; stroke: #fff; stroke-width: 1.5; }
.ws-shot .bd text { fill: #fff; font: 700 13px system-ui, sans-serif; }

/* The text's numbered items match the marks' badges. */
.sv-text ol > li::marker { color: #e11d48; }