/* Lab 1: Capture a Conversation: the captures, the worksheets and Packet Tracer's panes.
   Loads after /slides/slides.css and ../ccna-net.css (the network, terminals, tables, Wireshark). */

.sv-fig { justify-content: flex-start; gap: 14px; }
@media (min-width: 861px) { .sv-side .sv-body { grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); } }

/* The sections' colours. */
[data-sec="intro"] { --sec: #334155; }
[data-sec="computer"] { --sec: #7c3aed; }
[data-sec="pt"] { --sec: #1d4ed8; }
[data-sec="faults"] { --sec: #be123c; }

/* Worksheets: the cells the student fills in. */
.wk .blank { display: block; min-width: 76px; height: 18px; border-bottom: 1.5px dashed #9ca3af; }
.wk td { padding-top: 4px; padding-bottom: 4px; }
.wk { font-size: 13.5px; }
.tbl code.old { color: var(--sv-ink2); }

/* The student's own network. */
.net.home { max-height: 190px; }
.net .cloud { fill: #f3f4f6; stroke: #9ca3af; stroke-width: 2; }
.net .note.new text { fill: var(--ok); }

/* Wireshark's ICMP rows, and an opened header's fields. */
.ws-list .pr-icmp { background: #fce0ff; }
.ws-tree .f { padding-left: 22px; color: #374151; }

/* Wireshark's start page: the interfaces and their traffic. */
.ifcs { display: flex; flex-direction: column; gap: 4px; max-width: 360px; background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; padding: 8px 12px; }
.ifc { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.ifc svg { width: 120px; height: 20px; }
.ifc .spark { fill: none; stroke: #1d8102; stroke-width: 1.6; }

/* Packet Tracer's panes, drawn. */
.ptwin { background: #fff; border: 1px solid #94a3b8; border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; max-width: 560px; font-size: 13.5px; }
.pw-title { font-size: 14px; color: #0a3d62; }
.pw-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.field { border: 1px solid #94a3b8; border-radius: 3px; padding: 2px 8px; min-width: 110px; background: #f8fafc; font-size: 13px; }
.radio::before { content: '○ '; } .radio.on::before { content: '◉ '; color: var(--sv-accent); }
.btn { border: 1px solid #64748b; border-radius: 4px; padding: 2px 12px; background: #eef2f7; }
.pw-list { border-collapse: collapse; font-size: 12.5px; }
.pw-list th, .pw-list td { border: 1px solid #cbd5e1; padding: 2px 10px; text-align: left; }
.pw-list th { background: #f1f5f9; font-weight: 600; }
.simrow { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.cbs { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 16px; margin-top: 6px; }
.ftabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sv-line); margin-top: 6px; font-size: 12.5px; }
.ftabs span { padding: 2px 10px; color: var(--sv-ink2); }
.ftabs span.on { color: var(--sv-ink); font-weight: 700; border-bottom: 2px solid #0a3d62; }
.fvis { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--sv-line); font-size: 12.5px; color: var(--sv-ink2); }
.fvis b { color: var(--sv-ink); }
.cb { color: var(--sv-ink2); } .cb.on { color: var(--sv-ink); font-weight: 700; }

/* The web browser on PC0. */
.browser { max-width: 460px; border: 1px solid #94a3b8; border-radius: 6px; background: #fff; overflow: hidden; }
.browser .url { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f1f5f9; border-bottom: 1px solid #cbd5e1; font-size: 13px; }
.browser .url code { flex: 1; background: #fff; border: 1px solid #cbd5e1; padding: 2px 6px; }
.browser .page { padding: 18px 14px; color: #0a5a8a; font-size: 18px; }

/* SW1's table before and after the ping. */
.macs2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.macs2 small { display: block; color: var(--sv-ink2); margin-bottom: 3px; }
.macs2 .term { font-size: 11.5px; }
@media (max-width: 1100px) { .macs2 { grid-template-columns: 1fr; } }

/* The web request's stages. */
.hsteps { display: flex; flex-direction: column; gap: 6px; }
.hsteps > small { color: var(--sv-ink2); }
.hstep { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; padding: 6px 12px; font-size: 14px; }
.hstep .tag { font-weight: 800; font-size: 12.5px; min-width: 46px; }
.t-dns { color: var(--l4); } .t-tcp { color: var(--l4); } .t-http { color: var(--l7); }

/* The fault table. */
.ft td { text-align: center; }
.ft tr:last-child th, .ft tr:last-child td { font-weight: 700; font-size: 13px; border-top: 2px solid var(--sv-line); }

/* On a phone the wide tables and the capture list scroll sideways, instead of squeezing their columns. */
@media (max-width: 860px) {
  .tbl { display: block; overflow-x: auto; max-width: 100%; }
  .ws { overflow-x: auto; }
  .ws-list td:last-child { white-space: nowrap; }
}