/* PacketPilot: network diagram on cool paper, packet layers in cable colors.
   The design system (tokens, skeleton, controls, cards, …) is in base.css. */
:root {
  /* Layers = colors of the wire pairs (T568B) plus additions */
  --l-eth: var(--c-blue);
  --l-vlan: var(--c-violet);
  --l-arp: var(--c-orange);
  --l-ip: var(--c-green);
  --l-icmp: var(--c-teal);
  --l-udp: var(--c-brown);
  --l-vxlan: var(--c-pink);
  --l-frag: var(--c-slate);
  --l-data: var(--c-mist);
  --l-tcp: var(--c-steel);
  --l-stp: var(--c-gold);
  --l-rt: var(--c-rust);
  --l-vpn: var(--c-pine);
}

/* ---------- Exercises: drag chips, frame slots, ordering, bits ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; min-height: 40px; padding: 8px; border: 1px dashed var(--line); border-radius: var(--r-m); }
.dchip { padding: 6px 12px; border-radius: var(--r-s); background: var(--panel); border: 1px solid var(--ink-3); cursor: grab; user-select: none; font-size: .88rem; }
.dchip.sel { border-color: var(--select); box-shadow: 0 0 0 2px color-mix(in srgb, var(--select) 30%, transparent); }
.slotrow { display: flex; gap: 3px; overflow-x: auto; padding-bottom: 6px; }
.slot { border: 2px dashed var(--line); border-radius: var(--r-s); min-height: 74px; padding: 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  font-size: .8rem; text-align: center; background: var(--panel); flex: 0 0 auto; }
.slot .size { color: var(--ink-3); font-family: var(--mono); font-size: .75rem; }
.slot.filled { border-style: solid; }
.slot.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--panel)); }
.slot.wrong { border-color: var(--err); }
.slot.over { border-color: var(--focus); }
.stack-list { display: grid; gap: 6px; max-width: 560px; }
.stack-item { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); border-left-width: 6px; border-radius: var(--r-s); cursor: grab; }
.stack-item.dragging { opacity: .5; }
.macbits { display: grid; grid-template-columns: repeat(8, 38px); gap: 4px; margin: 12px 0; }
.macbits div { text-align: center; padding: 6px 0; border: 1px solid var(--line); border-radius: var(--r-s); font-family: var(--mono); background: var(--panel); }
.macbits div.hl { border-color: var(--select); background: color-mix(in srgb, var(--select) 12%, var(--panel)); font-weight: 700; }
.macbits span { display: block; font-size: .66rem; color: var(--ink-3); }

/* ---------- Lab ---------- */
.lab { position: relative; display: grid; grid-template-columns: 58px minmax(0, 1fr) var(--side-w, clamp(420px, 30vw, 580px)); grid-template-rows: minmax(0, 1fr) var(--dock-h, 230px); height: 100%; min-height: 0; }
.lab.compact { grid-template-columns: 52px minmax(0, 1fr) var(--side-w, clamp(400px, 30vw, 560px)); grid-template-rows: minmax(0, 1fr) var(--dock-h, 210px); }
.lab.no-palette { grid-template-columns: 0 minmax(0, 1fr) var(--side-w, clamp(400px, 30vw, 560px)); }

.palette { grid-row: 1 / 3; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 4px; padding: 8px 5px; overflow: hidden; }
.pal-item { display: grid; place-items: center; gap: 0; padding: 5px 0 4px; border-radius: var(--r-s); cursor: grab; font-size: .66rem; color: var(--ink-2); border: 1px solid transparent; background: none; }
.pal-item:hover { border-color: var(--line); background: var(--panel-2); }
.pal-item svg { width: 34px; height: 34px; }
.pal-sep { height: 1px; background: var(--line); margin: 4px 2px; }
.canvas-wrap svg.net { width: 100%; height: 100%; display: block; user-select: none; touch-action: none; }
.canvas-wrap.connecting { cursor: crosshair; }
.player { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; align-items: center; pointer-events: none; flex-wrap: wrap; }
.player > * { pointer-events: auto; }
.player .bar { display: flex; align-items: center; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 4px; box-shadow: var(--shadow); }
.player .time { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); padding: 0 8px; min-width: 88px; }
.player input[type=range] { width: 110px; accent-color: var(--ink); }
.player .speedlbl { font-size: .75rem; color: var(--ink-2); padding-right: 6px; }

.side { border-left: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto auto 1fr; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; grid-row: 1 / 3; grid-column: 3; }
.side-head .devglyph { width: 34px; height: 34px; flex: none; }
.cfg-grid { display: grid; grid-template-columns: 58px 1fr 52px; gap: 5px 6px; align-items: center; font-size: .85rem; }
.cfg-grid .if { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }
.cfg-grid.ports { grid-template-columns: 44px 92px minmax(0, 1fr); }
.cfg-grid.vx { grid-template-columns: 1fr 1fr; }
/* Rows in the configuration (routes, rules, NAT, …) wrap instead of squeezing the fields */
.side .list .item .row { flex-wrap: wrap !important; gap: 6px; }
.side .list .item .row > input.input:not([type=number]) { flex: 1 1 110px; min-width: 96px; }
.side .list .item .row > input.input[type=number] { flex: 0 0 auto; width: 70px !important; }
.side .list .item .row > .btn.icon:last-child { margin-left: auto; }
.side .list .item .row > .grp { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.side .list .item .row > .grp.grow { flex: 1 1 230px; }
.side .list .item .row > .grp > input.input:not([type=number]) { flex: 1 1 110px; min-width: 96px; }
.side .list .item .row > .grp > input.input[type=number] { width: 70px !important; flex: none; }
.side label.row { flex-wrap: nowrap; align-items: flex-start; }
.side label.row > input[type=checkbox] { flex: none; margin-top: 3px; }
.side .list .item label.row { flex-wrap: nowrap !important; }

.dock { grid-column: 2; grid-row: 2; border-top: 1px solid var(--line); background: var(--panel); display: grid; grid-template-columns: minmax(0, var(--dock-a, 1.25fr)) minmax(0, var(--dock-b, 1fr)); min-height: 0; }
.lab.no-palette .dock { grid-column: 2; }
.dock-col { display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0; }
.dock-col + .dock-col { border-left: 1px solid var(--line); }
.dock-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: .82rem; font-weight: 600; }
.dock-head .muted { font-weight: 400; }
.dock-head select { font-size: .78rem; padding: 2px 6px; }
.log { overflow: auto; min-height: 0; font-size: .8rem; }
.log .e { display: grid; grid-template-columns: 58px 74px 1fr; gap: 6px; padding: 3px 10px; border-bottom: 1px solid var(--grid); cursor: default; align-items: start; }
.log .e.has-frame { cursor: pointer; }
.log .e:hover { background: var(--panel-2); }
.log .e.sel { background: color-mix(in srgb, var(--select) 12%, var(--panel)); }
.log .t { font-family: var(--mono); color: var(--ink-3); font-size: .74rem; padding-top: 1px; }
.log .d { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log .e.k-drop .x, .log .e.k-err .x { color: var(--err); }
.log .e.k-ok .x { color: var(--ok); }
.log .e.k-learn .x { color: var(--l-vlan); }
.log .e.k-ignore .x { color: var(--ink-3); }
.log .e.k-send .x { color: var(--ink-2); }
.inspector { overflow: auto; min-height: 0; padding: 8px 10px 14px; font-size: .82rem; }
.bytebar { display: flex; height: 22px; border-radius: 4px; overflow: hidden; margin: 6px 0 4px; border: 1px solid var(--line); }
.bytebar i { display: block; min-width: 3px; }
.bytelegend { display: flex; justify-content: space-between; font-family: var(--mono); font-size: .72rem; color: var(--ink-3); }
.layer { border: 1px solid var(--line); border-left: 5px solid var(--lc, var(--ink-3)); border-radius: var(--r-s); margin-top: 6px; background: var(--panel); }
.layer > summary { cursor: pointer; padding: 5px 8px; font-weight: 600; display: flex; gap: 8px; align-items: center; list-style: none; }
.layer > summary::-webkit-details-marker { display: none; }
.layer > summary .b { margin-left: auto; font-weight: 400; color: var(--ink-3); font-family: var(--mono); font-size: .74rem; }
.layer table { width: 100%; border-collapse: collapse; }
.layer td { padding: 3px 8px; border-top: 1px solid var(--grid); vertical-align: top; }
.layer td:first-child { color: var(--ink-2); width: 36%; }
.layer td.v { font-family: var(--mono); font-size: .78rem; }
.layer td.h { color: var(--ink-3); font-size: .74rem; }
.layer.inner { margin-left: 12px; }
.lc-eth { --lc: var(--l-eth); } .lc-vlan { --lc: var(--l-vlan); } .lc-arp { --lc: var(--l-arp); } .lc-ip { --lc: var(--l-ip); }
.lc-icmp { --lc: var(--l-icmp); } .lc-udp { --lc: var(--l-udp); } .lc-vxlan { --lc: var(--l-vxlan); } .lc-frag { --lc: var(--l-frag); } .lc-data { --lc: var(--l-data); } .lc-tcp { --lc: var(--l-tcp); } .lc-stp { --lc: var(--l-stp); } .lc-rt { --lc: var(--l-rt); } .lc-vpn { --lc: var(--l-vpn); } .lc-dns { --lc: var(--l-udp); }
.bg-eth { background: var(--l-eth); } .bg-vlan { background: var(--l-vlan); } .bg-arp { background: var(--l-arp); } .bg-ip { background: var(--l-ip); }
.bg-icmp { background: var(--l-icmp); } .bg-udp { background: var(--l-udp); } .bg-vxlan { background: var(--l-vxlan); } .bg-frag { background: var(--l-frag); } .bg-data { background: var(--l-data); } .bg-tcp { background: var(--l-tcp); } .bg-stp { background: var(--l-stp); } .bg-rt { background: var(--l-rt); } .bg-vpn { background: var(--l-vpn); }

/* ---------- SVG network diagram ---------- */
svg.net text { font-family: var(--font); fill: var(--ink); }
svg.net .lnk { stroke: var(--ink-3); stroke-width: 2.5; }
svg.net .lnk.down { stroke-dasharray: 6 5; stroke: var(--err); }
svg.net .lnk.jumbo { stroke-width: 4.5; }
svg.net .lnk-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
svg.net .lnk-g.sel .lnk { stroke: var(--select); }
svg.net .iflbl { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
svg.net .mtulbl { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-3); paint-order: stroke; stroke: var(--paper); stroke-width: 3.5px; stroke-linejoin: round; }
svg.net .dev { cursor: pointer; outline: none; }
svg.net .dev:focus-visible .card { stroke: var(--focus); stroke-width: 2.5; }
svg.net .dev .card { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
svg.net .dev:hover .card { stroke: var(--ink-3); }
svg.net .dev.sel .card { stroke: var(--select); stroke-width: 2.5; }
svg.net .dev.trace .card { stroke: var(--l-vxlan); stroke-width: 2.5; }
svg.net .dev.pend .card { stroke: var(--focus); stroke-dasharray: 4 3; stroke-width: 2.5; }
svg.net .dev .nm { font-size: 12.5px; font-weight: 650; text-anchor: middle; }
svg.net .dev .ip { font-family: var(--mono); font-size: 10px; fill: var(--ink-2); text-anchor: middle; }
svg.net .dv-fill { fill: color-mix(in srgb, var(--ink) 8%, var(--panel)); stroke: var(--ink); stroke-width: 1.6; }
svg.net .dv-line { stroke: var(--ink); stroke-width: 1.6; fill: none; }
svg.net .dv-screen { fill: color-mix(in srgb, var(--l-eth) 18%, var(--panel)); stroke: none; }
svg.net .dv-led { fill: var(--l-ip); stroke: none; }
svg.net .dv-tunnel { stroke: var(--l-vxlan); stroke-width: 2.4; stroke-dasharray: 3 3; fill: none; }
svg.net .t-router .dv-fill { fill: color-mix(in srgb, var(--l-ip) 14%, var(--panel)); }
svg.net .t-switch .dv-fill { fill: color-mix(in srgb, var(--l-eth) 14%, var(--panel)); }
svg.net .t-vtep .dv-fill { fill: color-mix(in srgb, var(--l-vxlan) 13%, var(--panel)); }
svg.net .pkt { cursor: pointer; }
svg.net .pkt rect.box { stroke: var(--ink); stroke-width: 1.2; }
svg.net .pkt text { font-size: 9.5px; font-weight: 700; text-anchor: middle; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
svg.net .zone-g { --zc: var(--ink-3); }
svg.net .zone-g.c-blue { --zc: var(--l-eth); } svg.net .zone-g.c-violet { --zc: var(--l-vlan); } svg.net .zone-g.c-green { --zc: var(--l-ip); }
svg.net .zone-g.c-orange { --zc: var(--l-arp); } svg.net .zone-g.c-pink { --zc: var(--l-vxlan); } svg.net .zone-g.c-yellow { --zc: var(--l-stp); }
svg.net .zone { fill: color-mix(in srgb, var(--zc) 7%, transparent); stroke: var(--zc); stroke-dasharray: 6 5; pointer-events: none; }
svg.net .zone-g.sel .zone { stroke-dasharray: none; stroke-width: 1.6; }
svg.net .zone-tab { fill: color-mix(in srgb, var(--zc) 14%, var(--panel)); stroke: color-mix(in srgb, var(--zc) 55%, transparent); cursor: move; }
svg.net.ro .zone-tab { cursor: default; pointer-events: none; }
svg.net .zone-t { font-size: 11px; fill: var(--ink); pointer-events: none; font-weight: 600; }
svg.net .zone-rs { fill: var(--panel); stroke: var(--zc); cursor: nwse-resize; opacity: 0; transition: opacity .12s; }
svg.net .zone-g:hover .zone-rs, svg.net .zone-g.sel .zone-rs { opacity: 1; }
svg.net .stp-dot circle { stroke: var(--panel); stroke-width: 1.5; }
svg.net .stp-dot text { font-size: 7.5px; font-weight: 700; fill: #fff; pointer-events: none; }
svg.net .stp-dot.st-forwarding circle { fill: var(--ok); }
svg.net .stp-dot.st-blocking circle { fill: var(--err); }
svg.net .stp-dot.st-listening circle, svg.net .stp-dot.st-learning circle, svg.net .stp-dot.st-discarding circle { fill: var(--warn); }
svg.net .stp-dot.st-discarding.role-alternate circle, svg.net .stp-dot.st-discarding.role-backup circle { fill: var(--err); }
svg.net .stp-dot.st-disabled circle { fill: var(--ink-3); }
svg.net .dev .stpbadge { font-size: 10px; fill: var(--l-stp); font-weight: 650; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.swatch.cur { box-shadow: 0 0 0 2px var(--ink); }
.storm { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--err); border-left-width: 4px; border-radius: var(--r-m); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 8px; font-size: .9rem; }
.storm.hidden { display: none; }
.storm b { color: var(--err); }
.player .tog { font-size: .72rem; font-weight: 650; padding: 0 8px; height: 30px; border-radius: var(--r-s); border: 1px solid transparent; background: none; color: var(--ink-3); cursor: pointer; }
.player .tog.on { color: var(--l-stp); border-color: color-mix(in srgb, var(--l-stp) 45%, transparent); background: color-mix(in srgb, var(--l-stp) 10%, transparent); }
.palette svg .dv-fill { fill: color-mix(in srgb, var(--ink) 8%, var(--panel)); stroke: var(--ink); stroke-width: 1.6; }
.palette svg .dv-line { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.palette svg .dv-screen { fill: color-mix(in srgb, var(--l-eth) 18%, var(--panel)); }
.palette svg .dv-led { fill: var(--l-ip); }
.palette svg .dv-tunnel { stroke: var(--l-vxlan); stroke-width: 2.4; stroke-dasharray: 3 3; fill: none; }
.devglyph .dv-fill { fill: color-mix(in srgb, var(--ink) 8%, var(--panel)); stroke: var(--ink); stroke-width: 1.6; }
.devglyph .dv-line { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.devglyph .dv-screen { fill: color-mix(in srgb, var(--l-eth) 18%, var(--panel)); }
.devglyph .dv-led { fill: var(--l-ip); }
.devglyph .dv-tunnel { stroke: var(--l-vxlan); stroke-width: 2.4; stroke-dasharray: 3 3; fill: none; }

/* ---------- Lab page and networks ---------- */
.labpage { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.labbar { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); flex-wrap: wrap; }
.labbar .title { font-weight: 650; margin-right: 8px; }
.tile svg { width: 100%; height: 120px; background: var(--paper); border-radius: var(--r-s); border: 1px solid var(--grid-strong); }

/* ---------- Frame builder ---------- */
.fb { display: grid; grid-template-columns: 220px 1fr; gap: 22px; margin-top: 14px; }
.fb-pal { display: grid; gap: 6px; align-content: start; }
.fb-blk { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-s); background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--lc); cursor: grab; font-size: .9rem; }
.fb-blk .sz { margin-left: auto; font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.fb-drop { min-height: 96px; border: 2px dashed var(--line); border-radius: var(--r-m); padding: 10px; display: flex; gap: 4px; align-items: stretch; flex-wrap: wrap; background: var(--panel); }
.fb-drop.over { border-color: var(--focus); }
.bld { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: start; }
.bld-pal .fb-blk { cursor: pointer; text-align: left; font: inherit; color: inherit; }
.bld-pal .fb-blk .sz svg { width: 14px; height: 14px; }
.bld-frame { display: grid; gap: 8px; min-height: 80px; }
.bld-layer { background: var(--panel); border: 1px solid var(--line); border-left: 6px solid var(--lc); border-radius: var(--r-s); padding: 6px 10px 10px; }
.bld-layer.wrong { border-color: var(--err); border-left-color: var(--err); }
.bld-head { display: flex; align-items: center; gap: 4px; }
.bld-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 4px; }
.bld-fields .field { font-size: .78rem; }
.bld-fields .input.bad { border-color: var(--err); background: color-mix(in srgb, var(--err) 7%, var(--panel)); }
@media (max-width: 720px) { .bld { grid-template-columns: 1fr; } .bld-pal { grid-template-columns: repeat(3, 1fr); } }
.fb-cell { border-radius: var(--r-s); padding: 8px 10px 6px; color: #fff; display: grid; gap: 2px; min-width: 74px; position: relative; cursor: grab; }
.fb-cell .n { font-weight: 650; font-size: .86rem; }
.fb-cell .sz { font-family: var(--mono); font-size: .72rem; opacity: .9; }
.fb-cell button { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.2); color: #fff; border: 0; border-radius: 4px; width: 18px; height: 18px; display: grid; place-items: center; cursor: pointer; padding: 0; font-size: 11px; }
.fb-cell.bad { outline: 3px solid var(--err); outline-offset: 1px; }
.fb-msgs { margin-top: 10px; display: grid; gap: 4px; font-size: .9rem; }
.fb-msgs .m.bad { color: var(--err); } .fb-msgs .m.ok { color: var(--ok); }
.fb-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.fb-stats div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 10px 12px; }
.fb-stats b { display: block; font-size: 1.3rem; font-family: var(--mono); }
.fb-stats span { font-size: .8rem; color: var(--ink-2); }
.fb-grp { font-size: .74rem; font-weight: 650; color: var(--ink-3); margin: 6px 0 -2px; text-transform: uppercase; letter-spacing: .04em; }
.fb-grp:first-child { margin-top: 0; }

@media (max-width: 1100px) {
  .lab { grid-template-columns: 52px minmax(0, 1fr) var(--side-w, 320px); }
}
@media (max-width: 760px) {
  .lab, .lab.compact { grid-template-columns: 0 1fr; grid-template-rows: 1fr 200px auto; height: auto; min-height: 100%; }
  .palette { display: none; }
  .side { grid-column: 1 / 3; grid-row: 3; max-height: 60vh; border-left: 0; border-top: 1px solid var(--line); }
  .dock { grid-column: 1 / 3; grid-template-columns: 1fr; }
  .fb { grid-template-columns: 1fr; }
  .lesson-body.is-lab .lab { height: 80vh; }
}

/* ---------- Practice: troubleshooting and subnetting ---------- */
.symptom { border-left: 3px solid var(--l-arp); padding-left: 10px !important; }
.hint.cause { border-color: var(--ok); }
.sublabel { font-size: .92rem; color: var(--ink-2); }
.subq { font-size: 1.35rem; font-weight: 650; margin: 8px 0 14px; }
.subgrid { display: grid; grid-template-columns: minmax(140px, 200px) minmax(0, 240px) auto; gap: 8px 12px; align-items: center; }
.subgrid .feedback { margin: 0; }
@media (max-width: 760px) { .subgrid { grid-template-columns: 1fr; } }

/* ---------- Print theory pages ---------- */
.print-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 18px; }
.print-mod { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 10px 12px; }
.print-lessons { display: grid; gap: 3px; margin: 6px 0 0 22px; }
.print-mod label.row { flex-wrap: nowrap; align-items: flex-start; }
.print-mod label.row input { margin-top: 3px; flex: none; }
.print-doc .print-lesson { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m); padding: 18px 22px; margin-top: 16px; }
.lesson-top .printbtn { margin-left: auto; }
@media print {
  .print-doc .print-lesson { border: 0; padding: 0; margin: 0; break-before: page; }
  .print-doc .print-lesson:first-child { break-before: auto; }
  .print-lesson .crumb { font-size: .85rem; color: var(--ink-3); }
}

/* New main address of the server: a quiet card, not a modal */
.movecard { position: fixed; right: 18px; bottom: 76px; z-index: 40; max-width: 340px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--shadow); padding: 12px 14px; font-size: .9rem; }
.movecard p { margin: 4px 0 10px; color: var(--ink-2); }

/* Fullscreen lab (lesson body with goals, or the free lab) */
.lesson-body:fullscreen, .lesson-body.pseudo-full, .lab-root:fullscreen { background: var(--paper); height: 100vh; }
.pseudo-full { position: fixed !important; inset: 0; z-index: 45; background: var(--paper); height: 100vh !important; }
svg.net .lnk-lbls { pointer-events: none; }
svg.net .lnk-lbls .stp-dot { pointer-events: auto; }

/* Tracked conversation: messages in order with their path */
svg.net .lnk-g.trace .lnk { stroke: var(--l-vxlan); stroke-width: 3.2; }
.flowbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--panel-2); border-bottom: 1px solid var(--line); font-size: .84rem; }
.flowbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.flowbar .btn.small { padding: 2px 8px; font-size: .8rem; }
.flow-row { display: grid; grid-template-columns: 22px 58px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 6px; padding: 5px 10px; border-bottom: 1px solid var(--grid); cursor: pointer; font-size: .84rem; }
.flow-row:hover { background: var(--panel-2); }
.flow-row.sel { background: color-mix(in srgb, var(--l-vxlan) 12%, var(--panel)); }
.flow-row .n { grid-row: 1 / 3; width: 20px; height: 20px; border-radius: 50%; background: var(--l-vxlan); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.flow-row .t { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); padding-top: 2px; }
.flow-row .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-row .path { grid-column: 2 / 4; font-size: .78rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ctx-item svg .dv-fill { fill: color-mix(in srgb, var(--ink) 8%, var(--panel)); stroke: var(--ink); stroke-width: 2.4; }
.ctx-item svg .dv-line, .ctx-item svg .dv-tunnel { stroke: var(--ink); stroke-width: 2.4; fill: none; }
.ctx-item svg .dv-dot { fill: var(--ink); }
.ctx-item svg .dv-screen { fill: color-mix(in srgb, var(--l-eth) 18%, var(--panel)); }
.ctx-item svg .dv-led { fill: var(--l-ip); }
svg.net .pkt text.side { text-anchor: start; }