/* The CCNA section 1.0 network and its helpers (ccna-net.js), shared by its decks.
   Loads after /slides/slides.css, before the deck's own stylesheet. */

:root {
  --sv-accent: #0a7bbd; --sv-accent-soft: #e6f2fa;
  --mono: ui-monospace, Menlo, Consolas, monospace; --ok: #1d8102; --no: #d13212;
  /* One colour per layer, used wherever a layer is named. */
  --l1: #6b7280; --l2: #0f766e; --l3: #1d4ed8; --l4: #7c3aed; --l5: #b45309; --l6: #b45309; --l7: #be123c;
}

code { font-family: var(--mono); }
.arr { font-style: normal; color: var(--sv-ink2); white-space: nowrap; }
.arr.big { font-size: 22px; font-weight: 700; align-self: center; }
.ok { color: var(--ok); font-weight: 700; }
.no { color: var(--no); font-weight: 700; }
.fn { margin: 0; font-size: 12.5px; color: var(--sv-ink2); font-style: italic; }

/* A layer's number, in its colour. */
.ln { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; color: #fff; font-weight: 800; font-size: 13px; flex: none; background: var(--c); }
.l1 { --c: var(--l1); } .l2 { --c: var(--l2); } .l3 { --c: var(--l3); } .l4 { --c: var(--l4); }
.l5 { --c: var(--l5); } .l6 { --c: var(--l6); } .l7 { --c: var(--l7); }

/* Terminals. */
.term { margin: 0; padding: 10px 14px; border-radius: 8px; max-width: 100%; font: 12.5px/1.45 var(--mono); overflow: auto; white-space: pre; background: #16191f; color: #e8eaed; }
.term .pr { color: #7aa116; user-select: none; }
.term .out { color: #b4bcc6; }

/* Tables. */
.tbl { border-collapse: collapse; background: #fff; border: 1px solid var(--sv-line); font-size: 14px; }
.tbl th, .tbl td { padding: 6px 11px; border-top: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
.tbl tr:first-child th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--sv-ink2); }
.tbl tr:not(:first-child) th { font-weight: 600; white-space: nowrap; }
.tbl code { font-size: 13px; }
.tbl code.chg { background: #fff4d6; border-radius: 4px; padding: 0 3px; }

/* The network. */
.net { width: 100%; max-height: 300px; }
.net .zone { fill: #f2f6fa; stroke: #c9d6e2; stroke-dasharray: 5 4; }
.net .zone.z2 { fill: #f4f2fa; stroke: #d5cde6; }
.net .zn { font: 600 12px system-ui, sans-serif; fill: var(--sv-ink2); }
.net .lk { stroke: #8a96a3; stroke-width: 2.5; }
.net .lk.on { stroke: var(--sv-accent); stroke-width: 5; stroke-linecap: round; }
.net .port { font: 11px var(--mono); fill: var(--sv-ink2); paint-order: stroke; stroke: #f2f6fa; stroke-width: 4px; }
.net .nm { font: 700 13px system-ui, sans-serif; fill: var(--sv-ink); }
.net .ad { font: 11.5px var(--mono); fill: var(--sv-ink2); }
.net .d-pc, .ico .d-pc { fill: #fff; stroke: #33475b; stroke-width: 2; }
.net .d-screen, .ico .d-screen { fill: #d9ecf7; }
.net .d-stand, .net .d-slot, .ico .d-slot { stroke: #33475b; stroke-width: 2; fill: none; }
.net .d-sw { fill: #0a7bbd; }
.net .d-rt { fill: #0a5a8a; }
.net .d-arrows { stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; }
.net .nd.dim { opacity: .35; }
.net .env rect { fill: #fff8db; stroke: #b45309; stroke-width: 1.6; }
.net .env path { fill: none; stroke: #b45309; stroke-width: 1.6; }

/* Broadcast domains on the network drawing, and its notes. */
.net .bdom { fill: #fff4e5; stroke: #e8a33d; stroke-width: 1.5; stroke-dasharray: 6 4; }
.net .bdn { font: 700 12px system-ui, sans-serif; fill: #92400e; }
.net .lk.on2 { stroke: #0f766e; stroke-width: 5; stroke-linecap: round; }
.net .note text { font: 700 12px system-ui, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.net .note.ign text { fill: var(--sv-ink2); }
.net .note.ans text, .net .note.one text { fill: var(--sv-accent); }
.net .note.two text { fill: #0f766e; }
.net .note.stp text { fill: var(--no); }
.net .stopm circle { fill: #fff; stroke: var(--no); stroke-width: 2.5; }
.net .stopm path { stroke: var(--no); stroke-width: 3; stroke-linecap: round; }
.net .ad.ra { fill: var(--sv-ink); font-weight: 600; }

.term.ok { box-shadow: inset 4px 0 0 #7aa116; }
.term.bad { box-shadow: inset 4px 0 0 #e5534b; }
.net.two { max-height: 170px; }

/* Wireshark, drawn. */
.ws { background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; overflow: hidden; font-size: 12.5px; }
.ws-filter { background: #e8f5e3; padding: 5px 10px; border-bottom: 1px solid var(--sv-line); }
.ws-filter code { font-size: 12.5px; }
.ws-list { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; }
.ws-list th { text-align: left; background: #f3f4f6; padding: 3px 8px; font-family: system-ui, sans-serif; font-weight: 600; }
.ws-list td { padding: 2px 8px; white-space: nowrap; }
.ws-list td:last-child { white-space: normal; }
.ws-list .pr-arp { background: #faf0d7; } .ws-list .pr-dns { background: #daeeff; } .ws-list .pr-tcp { background: #e7e6ff; } .ws-list .pr-http { background: #e4ffc7; }
.ws-list tr.sel td { background: #2f6fbd; color: #fff; }
.ws-tree, .ws-bytes { border-top: 1px solid var(--sv-line); padding: 5px 10px; font-family: var(--mono); font-size: 11.5px; }
.ws-tree small, .ws-bytes small { display: block; font-family: system-ui, sans-serif; color: var(--sv-ink2); font-size: 11px; }
.ws-bytes code { font-size: 11.5px; }

/* Packet Tracer, drawn. */
.pt { display: flex; flex-direction: column; gap: 8px; }
.pt-top .net { max-height: 220px; }
.pt-bottom { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: start; }
.pt-events, .pt-pdu { background: #fff; border: 1px solid var(--sv-line); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
.pt-events table { border-collapse: collapse; margin-top: 4px; width: 100%; }
.pt-events th { text-align: left; font-weight: 600; color: var(--sv-ink2); padding: 2px 6px; }
.pt-events td { padding: 2px 6px; }
.pt-events tr.sel td { background: #e6f2fa; }
.pt-pdu small { display: block; color: var(--sv-ink2); }
.pt-pdu .io { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pt-pdu .io div { display: flex; flex-direction: column; gap: 3px; }
.pt-pdu .io i { font-weight: 700; font-style: normal; }
.pt-pdu .io span { font-size: 11px; background: #f3f4f6; border-radius: 4px; padding: 2px 6px; }
.pt-tabs { display: flex; flex-direction: column; gap: 4px; }
.pt-tabs span { padding: 4px 10px; border-radius: 12px; border: 1px solid #0a3d62; font-size: 12.5px; text-align: center; }
.pt-tabs span.on { background: #0a3d62; color: #fff; font-weight: 700; }

@media (max-width: 860px) {
  .pt-bottom { grid-template-columns: 1fr; }
  .pt-pdu .io { grid-template-columns: 1fr; }
}