/* Packet Journey (information-technology/packet-journey.php). The page chrome is the one-screen layout in
   /css/resource.css (and the challenge questions' .cq-* styles); this is the stage: the network diagram and its
   side panel, the load-time bars, the TCP/IP layers and the quiz bar. Theme tokens only: the load-time segments'
   and the circuit's own names for them are below. */

:root{
  --pj-dns:var(--viz-4); --pj-tcp:var(--viz-1); --pj-tls:var(--viz-6); --pj-req:var(--muted); --pj-xfer:var(--viz-7); --pj-resend:var(--viz-5);
  --pj-circ:var(--viz-7); --pj-wire:var(--line-strong);
}

/* ---------- the stage ---------- */
.rp-main{gap:10px}
.pj-view{flex:1;min-height:0}
.pj-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,350px);gap:12px}
@media (max-width:1100px){.pj-grid{grid-template-columns:minmax(0,1fr) 290px}}
.pj-grid-proto{grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr)}
.pj-h2-note{text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-left:6px}
.pj-head{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;flex:none}
.pj-legend{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:12px;color:var(--ink-soft)}
.pj-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-left:6px}
.pj-legend .k-pkt{background:var(--accent)}
.pj-legend .k-lost{background:var(--bad)}
.pj-legend .k-circ{background:var(--pj-circ)}
.pj-legend .k-dns{background:var(--pj-dns)}.pj-legend .k-conn{background:var(--pj-tcp)}.pj-legend .k-tls{background:var(--pj-tls)}.pj-legend .k-req{background:var(--pj-req)}
.pj-legend .k-xfer{background:var(--pj-xfer)}.pj-legend .k-resend{background:var(--pj-resend)}

.pj-net,.pj-load,.pj-stack,.pj-proto{display:flex;flex-direction:column;gap:8px;padding:10px 12px;min-height:0;min-width:0}
.pj-svgbox{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.pj-svgbox svg{display:block;width:100%;height:100%;max-height:100%}

.pj-side{padding:12px 14px;min-height:0;min-width:0;overflow:auto;display:flex;flex-direction:column;gap:12px}
.pj-side > section{display:flex;flex-direction:column;gap:8px}
.pj-side > section + section{border-top:1px solid var(--line);padding-top:12px}
.pj-btns{display:flex;flex-wrap:wrap;gap:6px}
.pj-hint{margin:0;font-size:12.5px;color:var(--muted);line-height:1.4}
.pj-hint:empty{display:none}
.pj-note{flex:none;margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.45}
.pj-say{margin:0;font-size:14px;line-height:1.5;color:var(--ink-soft);padding:9px 11px;border-radius:6px;background:var(--panel-2);border-left:3px solid var(--accent);min-height:5.6em}
.pj-say b{color:var(--ink)}

.pj-switch{display:inline-flex;align-items:center;gap:8px;font:600 13px/1.25 var(--font-display);color:var(--ink);cursor:pointer;padding:6px 10px;border-radius:6px;border:1px solid var(--line-strong);background:var(--panel-2);min-height:34px}
.pj-switch input{width:17px;height:17px;margin:0;accent-color:var(--accent);cursor:pointer;flex:none}
.pj-switch:focus-within{outline:2px solid var(--focus);outline-offset:2px}

/* the stages */
.pj-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pj-stage{width:100%;display:flex;align-items:center;gap:9px;text-align:left;font:600 13.5px/1.2 var(--font-display);color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:6px;padding:5px 8px;cursor:pointer}
.pj-stage:hover{border-color:var(--accent);color:var(--ink)}
.pj-stage:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.pj-stage .n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 12px/1 var(--font-mono);background:var(--panel-2);border:1px solid var(--line-strong);color:var(--ink-soft)}
.pj-stage.done{color:var(--ink)}
.pj-stage.done .n{background:var(--ok);border-color:var(--ok);color:var(--on-viz)}
.pj-stage.now{border-color:var(--accent);background:var(--accent-tint);color:var(--ink)}
.pj-stage.now .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* the packets' table and the header */
table.pj-table{font-size:13px}
table.pj-table th,table.pj-table td{padding:4px 6px;vertical-align:middle}
.pj-table tbody tr{cursor:pointer}
.pj-table tbody tr:hover td{background:var(--panel-2)}
.pj-table tbody tr.sel td{background:var(--accent-tint)}
.pj-table tbody tr:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.pj-model tbody tr{cursor:default}
.pj-model td:last-child{text-align:right;font-family:var(--font-mono);font-size:12.5px;white-space:nowrap}
.pj-header{font-size:13px;border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--panel-2)}
.pj-hdr-title{font:700 12px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;color:var(--accent-deep);margin-bottom:4px}
.pj-header dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}
.pj-header dt{color:var(--muted)}
.pj-header dd{margin:0;color:var(--ink)}
.pj-header .pj-hint{margin-top:6px}
table.pj-cmp{font-size:12.5px}
table.pj-cmp th,table.pj-cmp td{padding:4px 6px}
table.pj-cmp th[scope=row]{font-family:var(--font-body);font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}

/* ---------- the network diagram ---------- */
#pj-svg{background:var(--panel);border-radius:6px}
.pj-link{stroke:var(--pj-wire);stroke-width:3}
.pj-link.pj-wifi{stroke-dasharray:3 7;stroke-linecap:round}
.pj-link.pj-busy{stroke:var(--accent);stroke-width:4}
.pj-link.pj-reserved{stroke:var(--pj-circ);stroke-width:9;stroke-linecap:round}
.pj-link.pj-broken{stroke:var(--bad);stroke-width:5;stroke-dasharray:10 8}
.pj-body{fill:var(--panel-2);stroke:var(--ink-soft);stroke-width:2.5}
.pj-glyph{fill:none;stroke:var(--ink-soft);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pj-screen{fill:var(--accent-tint);stroke:none}
.pj-led{fill:var(--ok)}
.pj-node.pj-hot .pj-body{fill:var(--accent-tint);stroke:var(--accent);stroke-width:3.5}
.pj-node.pj-hot .pj-glyph{stroke:var(--accent)}
.pj-name{font:700 17px var(--font-display);fill:var(--ink)}
.pj-sub{font:500 14px var(--font-mono);fill:var(--muted)}
.pj-tiny{font:500 13px var(--font-body);fill:var(--muted)}
.pj-cloud{font:italic 500 15px var(--font-body);fill:var(--muted)}
.pj-knows,.pj-done{font:700 15px var(--font-mono);opacity:0;transition:opacity .3s}
.pj-knows{fill:var(--accent-deep)}
.pj-done{fill:var(--ok);font-size:18px}
.pj-knows.on,.pj-done.on{opacity:1}
.pj-slot{fill:none;stroke:var(--line-strong);stroke-width:2;stroke-dasharray:5 4}
.pj-slot.pj-gap{stroke:var(--bad);stroke-width:2.5;fill:var(--bad-tint)}
.pj-slot.pj-full{stroke:var(--ok);stroke-dasharray:none}
.pj-miss{font:700 20px var(--font-mono);fill:var(--bad);opacity:0}
.pj-miss.on{opacity:1}
.pj-pageblock{opacity:0;transition:opacity .3s}
.pj-pageblock.on{opacity:1}
.pj-pageblock rect{fill:var(--accent-tint);stroke:var(--accent);stroke-width:2}
.pj-pageblock text{font:700 14px var(--font-mono);fill:var(--ink)}
.pj-pkt{cursor:pointer}
.pj-pkt rect{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.pj-pkt text{font:700 16px var(--font-mono);fill:var(--on-accent);pointer-events:none}
.pj-pkt.pj-sel rect{stroke:var(--ink);stroke-width:3}
.pj-pkt.pj-lost rect{fill:var(--bad)}
.pj-pkt.pj-lost{opacity:.75}
.pj-pkt.pj-resent rect{fill:var(--accent-deep);stroke:var(--warn);stroke-width:3;stroke-dasharray:5 3}
.pj-msg rect{fill:var(--panel);stroke:var(--accent);stroke-width:2.5}
.pj-msg text{font:700 14px var(--font-mono);fill:var(--accent-deep)}
.pj-msg.pj-a rect{stroke:var(--ok)}
.pj-msg.pj-a text{fill:var(--ok)}
.pj-bubble rect{fill:var(--ink);opacity:.9}
.pj-bubble text{font:600 13px var(--font-body);fill:var(--panel)}
.pj-bubble.pj-bad rect{fill:var(--bad);opacity:1}
.pj-bubble.pj-bad text{fill:var(--on-viz)}

/* ---------- load time ---------- */
.pj-load{gap:10px}
.pj-pages{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px}
.pj-page{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--panel-2);display:flex;flex-direction:column;gap:7px}
.pj-page-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pj-page-top > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 10px}
.pj-page h3{margin:0;font:700 15px/1.2 var(--font-display);color:var(--ink)}
.pj-page-meta{font-size:12.5px;color:var(--muted)}
.pj-total{font:700 22px/1.1 var(--font-mono);color:var(--accent-deep);white-space:nowrap}
.pj-bar{display:flex;height:22px;border-radius:5px;overflow:hidden;background:var(--line)}
.pj-bar i{display:block;height:100%;min-width:0}
.pj-bar .seg-dns{background:var(--pj-dns)}.pj-bar .seg-tcp{background:var(--pj-tcp)}.pj-bar .seg-tls{background:var(--pj-tls)}
.pj-bar .seg-request{background:var(--pj-req)}.pj-bar .seg-transfer{background:var(--pj-xfer)}.pj-bar .seg-resend{background:var(--pj-resend)}
.pj-bar i + i{box-shadow:inset 1px 0 0 var(--panel)}
.pj-page-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.pj-split{font-size:12.5px;color:var(--ink-soft)}
.pj-whatif{display:flex;flex-wrap:wrap;gap:6px}
.pj-chip{font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-soft);background:var(--panel)}
.pj-chip b{font-family:var(--font-mono);color:var(--ink)}
.pj-chip.win{border-color:var(--ok);background:var(--ok-tint);color:var(--ink)}
.pj-presets{display:flex;flex-wrap:wrap;gap:6px}
.pj-presets .btn{white-space:normal;text-align:left}
.pj-presets .btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);color:var(--accent-deep)}
.pj-ctl{display:flex;flex-direction:column;gap:2px}
.pj-ctl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font:600 13px/1.3 var(--font-display);color:var(--ink)}
.pj-ctl output{font:500 12.5px/1.3 var(--font-mono);color:var(--accent-deep)}
.pj-ctl input[type="range"]{width:100%;margin:0;height:26px;accent-color:var(--accent);cursor:pointer}
.pj-ctl .ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:-3px}

/* ---------- protocols ---------- */
.pj-layers{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px}
.pj-layer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:10px;align-items:center;padding:10px 12px;border-radius:8px;border:1px solid var(--line);border-left:5px solid var(--accent)}
.pj-layer-application{border-left-color:var(--pj-dns)}.pj-layer-transport{border-left-color:var(--pj-tcp)}
.pj-layer-internet{border-left-color:var(--pj-tls)}.pj-layer-link{border-left-color:var(--pj-xfer)}
.pj-layer-name{font:700 15px/1.25 var(--font-display);color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.pj-layer-name .n{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font:700 12px/1 var(--font-mono);background:var(--panel-2);border:1px solid var(--line-strong)}
.pj-layer-job{flex-basis:100%;font:400 12.5px/1.35 var(--font-body);color:var(--muted)}
.pj-chips{display:flex;flex-wrap:wrap;gap:6px}
.pj-pchip{font:700 14px/1 var(--font-mono);padding:9px 12px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer}
.pj-pchip:hover{border-color:var(--accent)}
.pj-pchip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.pj-pchip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.pj-proto{overflow:auto;font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.pj-proto p{margin:0}
.pj-pname{margin:2px 0 0;font:700 26px/1.1 var(--font-display);color:var(--accent-deep)}
.pj-pfull{font-weight:600;color:var(--ink) !important}
.pj-pbox{padding:8px 11px;border-radius:6px;background:var(--panel-2);border-left:3px solid var(--accent)}
.pj-pbox b{font:700 12px/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.05em;color:var(--accent-deep)}
.pj-pbox.pj-tip{border-left-color:var(--warn)}
.pj-pbox.pj-tip b{color:var(--warn)}

/* one packet, wrapped in each layer's header */
.pj-encap{margin-top:2px;font-size:12.5px;color:var(--ink-soft)}
.pj-encap-title{font:600 11.5px/1.2 var(--font-display);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.pj-encap .e{border:1.5px solid var(--line-strong);border-radius:6px;padding:4px 8px 6px;display:flex;flex-direction:column;gap:4px}
.pj-encap .e > span{font-family:var(--font-mono);font-size:12px}
.pj-encap .e-link{border-color:var(--pj-xfer)}.pj-encap .e-ip{border-color:var(--pj-tls)}
.pj-encap .e-tcp{border-color:var(--pj-tcp)}.pj-encap .e-app{border-color:var(--pj-dns);background:var(--panel-2)}

/* ---------- test yourself ---------- */
.pj-test{display:flex;flex-direction:column;gap:8px}
.pj-testbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px;color:var(--ink-soft)}
.pj-quiz{flex:1;min-height:0}
.pj-rev{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.pj-rev-q{font-weight:600;color:var(--ink)}
.pj-rev-bad{color:var(--bad)}
.pj-rev-ok{color:var(--ok)}

/* ---------- short laptop windows ---------- */
@media (min-width:901px) and (max-height:700px){
  .pj-say{min-height:0;font-size:13px}
  .pj-stage{padding:3px 8px}
  .pj-page{padding:6px 10px;gap:4px}
  .pj-page h3{font-size:14px}
  .pj-total{font-size:17px}
  .pj-bar{height:12px}
  .pj-pages{gap:7px}
  .pj-chip{padding:2px 8px}
  .pj-split .lbl{display:none}
  .pj-layer{padding:7px 10px}
}
/* laptops: slightly tighter toggles */
@media (min-width:901px) and (max-width:1500px){
  .rp-controls .seg-toggle button{padding:9px 12px}
  .rp-controls .seg-toggle.seg-quiet button{padding:7px 10px}
  .rp-titlebar{column-gap:18px}
}

/* ---------- tablets and phones: everything stacks and the page scrolls ---------- */
@media (max-width:900px){
  .pj-grid,.pj-grid-proto{display:flex;flex-direction:column}
  .pj-svgbox{display:block}
  .pj-svgbox svg{height:auto}
  .pj-pages,.pj-layers{overflow:visible}
  .rp-controls{width:100%}
  .seg-toggle button{min-height:40px}
  .btn,.pj-switch,.pj-stage,.pj-pchip{min-height:40px}
  .pj-ctl input[type="range"]{height:40px}
  .pj-table tbody td{padding:8px 6px}
  .pj-test{min-height:70vh}
}
@media (max-width:640px){
  .rp-main{padding-left:10px;padding-right:10px}
  .pj-net{padding:8px 6px}
  .pj-layer{grid-template-columns:1fr}
  /* the diagram is drawn 1000 wide: on a phone it's about a third of that, so its text is drawn bigger */
  /* the diagram turns on its side (560 wide): on a phone that's about two-thirds size, so its text is drawn bigger */
  .pj-name{font-size:23px}
  .pj-sub,.pj-tiny{font-size:18px}
  .pj-knows{font-size:19px}
  .pj-done{font-size:23px}
  .pj-svgbox svg{max-width:440px;margin:0 auto}
  .rp-controls .seg-toggle{display:flex;width:100%}
  .rp-controls .seg-toggle button{flex:1 1 0;justify-content:center;white-space:normal;text-align:center;line-height:1.15;padding:8px 6px;min-width:0}
}