/* ===========================================================================
   pt.css — the simulator shell (classic network-simulator layout)

   Everything here is prefixed `pt-` so it sits on top of lab.html's own
   stylesheet without fighting it: the buttons, tags, tables, dialogs and
   terminal are still the ones the rest of the simulator uses. What this file
   adds is the *furniture* a desktop simulator has and the old shell did not — a
   menu bar with real drop-downs, a main toolbar, a right-hand common-tools
   rail, the two-level device shelf, the scenario/PDU window, the simulation
   panel, and the physical-view containers.

   Colours come from the theme tokens, so all of it works in dark and light.
   =========================================================================== */

:root{
  --pt-bar:#f1f4f8; --pt-bar2:#e6ebf2; --pt-rail:#eef2f7;
  --pt-sel:#0b5cab; --pt-selbg:rgba(11,92,171,.12);
  --pt-grid:rgba(110,130,155,.20);
  --pt-shadow:0 8px 26px rgba(12,20,30,.22);
}
[data-theme=dark]{
  --pt-bar:#131c25; --pt-bar2:#0f1720; --pt-rail:#101822;
  --pt-sel:#3f95e6; --pt-selbg:rgba(63,149,230,.16);
  --pt-grid:rgba(120,145,175,.16);
  --pt-shadow:0 10px 30px rgba(0,0,0,.5);
}

/* ------------------------------------------------------------------ layout */
.pt-app{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pt-mid{flex:1;min-height:0;display:flex}
.pt-wsarea{flex:1;min-width:0;display:flex;flex-direction:column}
.pt-wsrow{flex:1;min-height:0;display:flex}

/* --------------------------------------------------------------- menu bar */
.pt-menubar{height:26px;background:var(--pt-bar);border-bottom:1px solid var(--line);
  display:flex;align-items:stretch;padding:0 4px;flex:0 0 auto;position:relative;z-index:140}
.pt-menubar>.pt-m{display:flex;align-items:center;padding:0 10px;font-size:12px;color:var(--ink2);
  cursor:default;border-radius:3px;user-select:none}
.pt-menubar>.pt-m:hover,.pt-menubar>.pt-m.on{background:var(--pt-sel);color:#fff}
.pt-menu{position:absolute;top:26px;background:var(--card);border:1px solid var(--line);
  border-radius:0 0 6px 6px;box-shadow:var(--pt-shadow);min-width:236px;padding:4px 0;z-index:141}
.pt-menu .it{display:flex;align-items:center;gap:8px;padding:4px 12px;font-size:12px;color:var(--ink2);
  white-space:nowrap;cursor:pointer}
.pt-menu .it:hover{background:var(--pt-sel);color:#fff}
.pt-menu .it.dis{opacity:.4;pointer-events:none}
.pt-menu .it .k{margin-left:auto;padding-left:26px;font-size:10.5px;opacity:.65;font-family:var(--mono)}
.pt-menu .it .ck{width:12px;display:inline-block;text-align:center}
.pt-menu .hr{height:1px;background:var(--line);margin:4px 0}
.pt-menu .hd{padding:3px 12px;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}

/* ---------------------------------------------------------- main toolbar */
.pt-toolbar{height:36px;background:var(--pt-bar);border-bottom:1px solid var(--line);
  display:flex;align-items:center;padding:0 6px;gap:2px;flex:0 0 auto}
.pt-tb{width:28px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  color:var(--ink2);border:1px solid transparent;flex:0 0 auto}
.pt-tb:hover{background:var(--bg3);border-color:var(--line)}
.pt-tb.on{background:var(--pt-sel);color:#fff;border-color:var(--pt-sel)}
.pt-tb:disabled{opacity:.35;cursor:not-allowed;background:none;border-color:transparent}
.pt-vr{width:1px;height:20px;background:var(--line);margin:0 5px;flex:0 0 auto}
.pt-wsw{display:flex;border:1px solid var(--line);border-radius:5px;overflow:hidden;flex:0 0 auto}
.pt-wsw button{padding:4px 11px;font-size:11.5px;font-weight:600;color:var(--ink2);white-space:nowrap}
.pt-wsw button.on{background:var(--pt-sel);color:#fff}

/* --------------------------------------------------------- secondary bar */
.pt-navbar{height:28px;background:var(--pt-bar2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:4px;padding:0 6px;flex:0 0 auto;font-size:11.5px}
.pt-navbar .crumb{color:var(--muted)}
.pt-navbar .crumb b{color:var(--ink)}
.pt-nbtn{padding:3px 9px;border-radius:4px;border:1px solid transparent;color:var(--ink2);font-size:11.5px}
.pt-nbtn:hover{background:var(--bg3);border-color:var(--line)}
.pt-nbtn.on{background:var(--pt-sel);color:#fff;border-color:var(--pt-sel)}

/* ----------------------------------------------------------- common tools */
.pt-rail{width:42px;background:var(--pt-rail);border-left:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;padding:5px 0;gap:2px;flex:0 0 auto;overflow-y:auto}
.pt-rail .pt-tb{width:32px;height:30px}
.pt-rail .hr{width:24px;height:1px;background:var(--line);margin:4px 0}

/* ------------------------------------------------------------- workspace */
.pt-wswrap{flex:1;position:relative;overflow:auto;background:var(--bg)}
.pt-canvas{position:relative;transform-origin:0 0}
.pt-canvas.grid{background-image:radial-gradient(circle,var(--pt-grid) 1px,transparent 1px);
  background-size:20px 20px}
.pt-wswrap::-webkit-scrollbar{width:12px;height:12px}
.pt-wswrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px;border:3px solid var(--bg)}
.pt-wswrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.pt-wswrap::-webkit-scrollbar-corner{background:var(--bg)}
.pt-node{position:absolute;text-align:center;z-index:4}
.pt-node .cap{font-size:10px;font-weight:600;line-height:1.15;margin-top:1px;white-space:nowrap}
.pt-node .sub{font-size:8.5px;color:var(--muted);white-space:nowrap;line-height:1.2}
.pt-node.sel .box{border-color:var(--pt-sel);background:var(--pt-selbg)}
.pt-node .box{border:2px solid transparent;border-radius:6px;padding:1px;display:inline-block}
.pt-band{position:absolute;border:1px dashed var(--pt-sel);background:var(--pt-selbg);z-index:20;pointer-events:none}
.pt-note{position:absolute;z-index:5;font-size:11px;color:var(--ink2);font-weight:600;
  padding:2px 4px;border-radius:3px;max-width:260px;white-space:pre-wrap;word-break:break-word}
.pt-note.sel{outline:2px solid var(--pt-sel);background:var(--pt-selbg)}
.pt-pdumark{position:absolute;width:19px;height:14px;z-index:9;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));transition:left .35s linear,top .35s linear}

/* mode toggle floating bottom-right of the workspace, as PT does it */
.pt-modebox{position:absolute;right:10px;bottom:8px;z-index:30;display:flex;flex-direction:column;
  align-items:flex-end;gap:4px;pointer-events:none}
.pt-modebox>*{pointer-events:auto}
.pt-clock{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);
  border-radius:5px;padding:2px 7px;font-size:10.5px;color:var(--ink2);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pt-clock .t{font-family:var(--mono);font-weight:700;color:var(--ink)}

/* ----------------------------------------------------------- device shelf */
.pt-shelf{height:148px;border-top:1px solid var(--line);background:var(--card);display:flex;flex:0 0 auto}
.pt-shelf .tips{width:112px;border-right:1px solid var(--line);padding:6px;font-size:9.5px;
  color:var(--muted);line-height:1.35;overflow:hidden;flex:0 0 auto}
.pt-shelf .tips b{display:block;color:var(--ink);font-size:11px;margin-bottom:2px}
.pt-cats{width:196px;border-right:1px solid var(--line);display:flex;flex-direction:column;flex:0 0 auto}
.pt-catrow{display:flex;flex-wrap:wrap;gap:2px;padding:4px;overflow-y:auto}
.pt-cat{width:34px;height:32px;border-radius:4px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border:1px solid transparent;color:var(--ink2)}
.pt-cat:hover{background:var(--bg3);border-color:var(--line)}
.pt-cat.on{background:var(--pt-sel);color:#fff;border-color:var(--pt-sel)}
.pt-cat .lb{font-size:7.5px;line-height:1;margin-top:1px;max-width:34px;overflow:hidden;text-overflow:ellipsis}
.pt-catname{padding:2px 6px;font-size:10px;font-weight:700;color:var(--muted);border-top:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-devs{flex:1;min-width:0;padding:5px 7px;overflow:auto;display:flex;gap:4px;flex-wrap:wrap;align-content:flex-start}
.pt-dev{width:74px;padding:2px;border-radius:5px;border:1px solid transparent;text-align:center;cursor:pointer}
.pt-dev:hover{background:var(--bg3)}
.pt-dev.on{background:var(--pt-selbg);border-color:var(--pt-sel)}
.pt-dev .nm{font-size:9px;line-height:1.15;margin-top:1px;color:var(--ink2)}
.pt-grouphd{flex-basis:100%;margin:4px 0 1px;font-size:9px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}

/* --------------------------------------------------------- right-hand dock */
.pt-dock{width:392px;border-left:1px solid var(--line);background:var(--panel);display:flex;
  flex-direction:column;flex:0 0 auto;min-height:0}
.pt-dock.wide{width:470px}
.pt-dockhd{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--card);
  border-bottom:1px solid var(--line);font-size:11.5px;font-weight:650;flex:0 0 auto}
.pt-evrow td{font-size:10.5px}
.pt-legend{display:flex;flex-wrap:wrap;gap:6px;padding:5px 8px;border-top:1px solid var(--line);font-size:10px}
.pt-swatch{width:10px;height:10px;border-radius:2px;display:inline-block;margin-right:3px;vertical-align:-1px}

/* play controls */
.pt-play{display:flex;align-items:center;gap:4px;padding:5px 8px;border-bottom:1px solid var(--line)}
.pt-speed{-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--line);
  width:96px;outline:none}
.pt-speed::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;
  background:var(--pt-sel);cursor:pointer}
.pt-speed::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--pt-sel);cursor:pointer}

/* ---------------------------------------------------------- PDU / scenario */
.pt-pdubar{height:154px;border-top:1px solid var(--line);background:var(--card);display:flex;flex:0 0 auto}
.pt-pduside{width:172px;border-right:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:5px}
.pt-pdutable{flex:1;overflow:auto}
.pt-fire{width:22px;height:18px;border-radius:3px;border:1px solid var(--line);background:var(--bg3);
  font-size:10px;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.pt-fire:hover{background:var(--pt-sel);color:#fff;border-color:var(--pt-sel)}
.pt-dot{width:11px;height:11px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.25)}

/* ------------------------------------------------------------- status bar */
.pt-status{height:22px;background:var(--pt-bar);border-top:1px solid var(--line);display:flex;
  align-items:center;padding:0 10px;gap:12px;font-size:10.5px;color:var(--muted);flex:0 0 auto}

/* ------------------------------------------------------------ dialogs etc */
/* ------------------------------------------------- the device window
   It opens on a click and it is the thing somebody spends the lesson in, so
   it is worth more than a flat bar and a square corner. What changed, and
   why each one:

     · a hairline border as well as the shadow, so the window has an edge of
       its own on a pale workspace — a shadow alone leaves the top corners
       melting into the canvas
     · a deeper, two-layer shadow: a tight one for the lift and a wide soft
       one for the distance, which is what makes a floating window read as
       floating rather than as pasted on
     · 12px corners instead of 8, to match the rest of the product
     · a title bar with a gradient across the accent rather than one flat
       fill, and a 36px height so the device artwork and the power switch in
       it are not squeezed
     · the title bar's own buttons get a rounded hover target big enough to
       hit, which at 22px square they were not
   Everything here is the accent token, so all three skins follow. */
.pt-win{background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 2px 6px rgba(12,20,30,.16),0 18px 50px rgba(12,20,30,.28);display:flex;
  flex-direction:column;overflow:hidden;max-width:96vw;max-height:92vh}
.pt-wint{height:36px;color:#fff;display:flex;align-items:center;padding:0 8px 0 11px;
  gap:9px;font-size:12px;font-weight:600;flex:0 0 auto;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--pt-sel) 88%,#fff) 0%,
    var(--pt-sel) 55%,
    color-mix(in srgb,var(--pt-sel) 90%,#000) 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18)}
/* The artwork in the title bar sits on a slab of its own, so a coloured
   device on a coloured bar still has an edge. */
.pt-wint > svg{border-radius:5px;background:rgba(255,255,255,.16);padding:2px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.pt-wint .x,.pt-wint .pt-maxb{width:26px;height:26px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;transition:background .12s}
.pt-wint .x{margin-left:4px}
.pt-wint .x:hover{background:rgba(255,255,255,.26)}
.pt-wint .pt-maxb:hover{background:rgba(255,255,255,.2)}
.pt-body{flex:1;overflow:auto;min-height:0;padding:12px}
.pt-foot{display:flex;gap:6px;justify-content:flex-end;padding:8px 10px;border-top:1px solid var(--line);flex:0 0 auto}
.pt-grid2{display:grid;grid-template-columns:132px 1fr;gap:6px 8px;align-items:center}
.pt-grid2 label{font-size:11.5px;color:var(--ink2)}
.pt-in{padding:3px 7px;border:1px solid var(--line);border-radius:4px;background:var(--bg);color:var(--ink);
  font-size:11.5px;width:100%}
textarea.pt-in{font-family:var(--mono);font-size:11px;resize:vertical}
.pt-sec{border:1px solid var(--line);border-radius:6px;padding:9px 11px;margin-bottom:10px;background:var(--bg)}
.pt-sec>h4{margin:0 0 8px;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.pt-chk{display:flex;align-items:center;gap:5px;font-size:11px;padding:1px 0;white-space:nowrap}
.pt-ctx{position:fixed;background:var(--card);border:1px solid var(--line);border-radius:6px;
  box-shadow:var(--pt-shadow);z-index:400;padding:4px 0;min-width:190px}
.pt-ctx .it{padding:4px 12px;font-size:11.5px;color:var(--ink2);white-space:nowrap;cursor:pointer}
.pt-ctx .it:hover{background:var(--pt-sel);color:#fff}
.pt-ctx .hr{height:1px;background:var(--line);margin:3px 0}

/* -------------------------------------------------------- physical view */
.pt-phys{position:absolute;inset:0}
.pt-container{position:absolute;border:2px solid var(--line);border-radius:8px;background:var(--card);
  box-shadow:0 2px 10px rgba(0,0,0,.12);overflow:hidden;cursor:pointer}
.pt-container .ttl{padding:3px 8px;background:var(--bg3);font-size:11px;font-weight:700;color:var(--ink2);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px}
.pt-container.sel{border-color:var(--pt-sel)}
.pt-rackwrap{display:flex;gap:14px;flex-wrap:wrap;padding:14px}
.pt-rack{width:236px;background:#1b232c;border:2px solid #2c3742;border-radius:6px;padding:8px 6px;
  box-shadow:inset 0 0 22px rgba(0,0,0,.55)}
.pt-rack .rname{color:#9fb3c6;font-size:10.5px;font-weight:700;text-align:center;margin-bottom:6px;
  letter-spacing:.04em;text-transform:uppercase}
.pt-ru{height:26px;border:1px dashed #33414f;border-radius:3px;margin-bottom:3px;display:flex;
  align-items:center;justify-content:center;color:#5b6b7a;font-size:9px;position:relative}
.pt-ru.filled{border-style:solid;border-color:#46525f;background:linear-gradient(180deg,#39454f,#2b343d);
  color:#d7e6ee;font-size:9.5px;font-weight:600;cursor:pointer;gap:6px;padding:0 6px;justify-content:flex-start}
.pt-ru.filled:hover{border-color:var(--pt-sel)}
.pt-ru .led{width:6px;height:6px;border-radius:50%;background:#2ecc71;flex:0 0 auto}
.pt-ru .led.off{background:#c0392b}

/* ------------------------------------------------------------- responsive */
@media(max-width:1180px){ .pt-dock{width:330px} .pt-cats{width:150px} }
@media(max-width:900px){
  .pt-menubar,.pt-toolbar,.pt-navbar{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .pt-menubar::-webkit-scrollbar,.pt-toolbar::-webkit-scrollbar,.pt-navbar::-webkit-scrollbar{display:none}
  .pt-menubar>*,.pt-toolbar>*,.pt-navbar>*{flex:0 0 auto}
  .pt-dock{width:290px}
  .pt-shelf .tips{display:none}
}

/* ---------------------------------------------------------------- pt-cisco.js
   Physical tab (chassis + modules) and the terminal console. */
.ncx-phys{display:flex;gap:12px;padding:12px;min-height:0;flex:1;overflow:auto}
.ncx-mods{flex:0 0 170px;display:flex;flex-direction:column;gap:3px;border:1px solid var(--line);
  border-radius:6px;padding:8px;background:var(--panel);align-self:flex-start}
.ncx-h{font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.06em;margin-bottom:4px}
.ncx-mod{font:11.5px var(--mono);padding:5px 7px;border-radius:4px;cursor:grab;
  border:1px solid transparent}
.ncx-mod:hover{background:var(--pt-selbg)}
.ncx-mod.on{background:var(--pt-sel);color:#fff}
.ncx-none{font-size:11px;color:var(--muted);line-height:1.5}
.ncx-drop{margin-top:8px;border:1px dashed var(--line);border-radius:5px;padding:8px;font-size:10.5px;
  color:var(--muted);text-align:center}
.ncx-main{flex:1;min-width:0}
.ncx-bar{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px}
.ncx-rack{background:linear-gradient(#1a1f24,#101316);border-radius:6px;padding:14px 10px;overflow-x:auto}
.ncx-msg{margin-top:8px;padding:6px 10px;border-radius:5px;font-size:11.5px}
.ncx-msg.ok{background:rgba(14,124,102,.12);color:var(--green)}
.ncx-msg.bad{background:rgba(192,57,43,.12);color:var(--red)}
.ncx-steps{margin-top:6px;font-size:11px;color:var(--muted)}
.ncx-card{margin-top:10px;border:1px solid var(--line);border-radius:6px;padding:9px 11px;background:var(--panel)}

.ncx-crt{flex:1;min-height:0;display:flex;flex-direction:column;background:#000}
.ncx-tb{display:flex;align-items:center;gap:2px;padding:3px 6px;background:var(--pt-bar);border-bottom:1px solid var(--line)}
.ncx-tb button{padding:4px 6px;border-radius:3px;color:var(--ink2)}
.ncx-tb button:hover{background:var(--pt-selbg)}
.ncx-tb .sep{width:1px;height:18px;background:var(--line);margin:0 4px}
.ncx-tb select{margin-left:auto;font-size:11px;padding:2px 4px;background:var(--bg);color:var(--ink);
  border:1px solid var(--line);border-radius:3px}
.ncx-tabs{display:flex;background:var(--pt-bar2);border-bottom:1px solid var(--line);padding:3px 6px 0}
.ncx-tab{padding:4px 12px;font-size:11.5px;font-weight:600;border:1px solid var(--line);border-bottom:none;
  border-radius:4px 4px 0 0;background:var(--bg);display:flex;gap:6px;align-items:center}
.ncx-ok{color:#1f9d55;font-size:11px}
.ncx-screen{flex:1;min-height:0;overflow:auto;padding:6px 8px;position:relative;cursor:text;
  font-family:var(--mono);line-height:1.3;
  white-space:pre-wrap;word-break:break-all;user-select:text}
.ncx-screen ::selection{background:var(--ncx-sel)}
.ncx-dim{color:var(--ncx-dim)}
.ncx-cur{background:var(--c);color:var(--b);animation:ncxblink 1s steps(1) infinite}
.ncx-cur.idle{background:none;color:inherit;outline:1px solid var(--c);animation:none}
@keyframes ncxblink{50%{background:none;color:inherit}}
.ncx-inp{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;border:0;padding:0}
.ncx-status{display:flex;background:var(--pt-bar);border-top:1px solid var(--line);font-size:11px;color:var(--ink2)}
.ncx-status span{padding:2px 10px;border-left:1px solid var(--line);white-space:nowrap}
.ncx-status span.grow{border-left:none}

/* ------------------------------------------- roomier workspace (pt-app.js) */
.pt-tbw{width:auto;padding:0 9px;gap:5px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center}
.pt-dockrail{width:74px;flex:0 0 auto;border-left:1px solid var(--line);background:var(--pt-rail);
  display:flex;flex-direction:column;gap:2px;padding:6px 4px;overflow:auto}
.pt-dockrail button{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px;border-radius:6px;
  font-size:10px;color:var(--ink2);position:relative}
.pt-dockrail button:hover{background:var(--pt-selbg);color:var(--pt-sel)}
.pt-dockrail button i{position:absolute;top:3px;right:6px;font-style:normal;font-size:9px;font-weight:700;
  background:var(--pt-sel);color:#fff;border-radius:8px;padding:0 5px;line-height:14px}
.pt-dockx{margin-left:auto;font-size:15px !important;padding:2px 10px !important}
body.pt-full .nb-head{display:none !important}
.ncx-rack.host{display:flex;gap:14px;align-items:center;background:linear-gradient(#e9edf1,#cfd6dd)}
.ncx-rack.host svg{flex:1;min-width:0}
.ncx-hostpic{flex:0 0 auto;padding:0 6px}

/* Windows open below the site header, never over or under it, and never
   taller than the room that is left. The device window floats: no dimming,
   the workspace behind it stays visible and clickable. */
.ovl{top:var(--header-h,54px) !important}
body.pt-full .ovl{top:0 !important}
.ovl .pt-win{max-height:100%;max-width:100%}
.ovl.pt-float{background:transparent;pointer-events:none}
.ovl.pt-float .pt-win{pointer-events:auto;box-shadow:0 14px 44px rgba(0,0,0,.38)}
.pt-pwr{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border-radius:4px;font-size:11px;font-weight:700;
  background:rgba(0,0,0,.25);color:#ffb4ab;margin-right:6px}
.pt-pwr.on{color:#9ff0b8}
.pt-pwr:hover{background:rgba(0,0,0,.4)}

/* the packet a learner clicked on the workspace (pt-flow.js) */
.pt-pktcard{position:fixed;right:96px;bottom:70px;width:380px;max-height:60vh;overflow:auto;z-index:260;
  background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--pt-shadow);font-size:12px}
.pt-pktcard .hd{display:flex;align-items:center;gap:8px;color:#fff;padding:7px 10px;border-radius:7px 7px 0 0;position:sticky;top:0}
.pt-pktcard .hd span{opacity:.9;font-size:11px}
.pt-pktcard .hd button{margin-left:auto;color:#fff;font-size:13px}
.pt-pktcard table{width:100%;border-collapse:collapse;margin:6px 0}
.pt-pktcard th{text-align:left;color:var(--muted);font-weight:600;padding:3px 10px;width:90px;vertical-align:top}
.pt-pktcard td{padding:3px 10px 3px 0;word-break:break-all}
.pt-pktcard .layers{border-top:1px solid var(--line);padding:6px 10px 10px}
.pt-pktcard summary{cursor:pointer;padding:3px 0;color:var(--brand)}
.pt-pktcard .kid{padding-left:16px;color:var(--ink2);font-size:11px}

/* ------------------------------------------ physical workspace as a place */
.pt-physcanvas{background:none !important;min-height:100% !important;display:flex;flex-direction:column}
.pt-physcanvas>.pt-scene,.pt-physcanvas>.pt-room{flex:1}
.pt-scene{border-radius:4px;overflow:hidden;min-height:calc(100vh - 230px) !important}
.pt-scene-building{box-shadow:inset 0 0 0 10px #8e877b,inset 0 0 0 12px #6b655b}
.pt-place{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:grab;padding:4px;border-radius:10px;
  border:2px dashed transparent;user-select:none}
.pt-place:hover{background:rgba(255,255,255,.35)}
.pt-place.sel{border-color:#1d6fb8;background:rgba(255,255,255,.45)}
.pt-place .pic{width:150px;height:110px;background-size:cover;background-position:center;border-radius:6px}
.pt-place .tag{margin-top:2px;display:flex;align-items:center;gap:6px;background:#1f2a36;color:#fff;border-radius:12px;
  padding:3px 4px 3px 11px;font-size:11.5px;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pt-place .tag .n{background:#3aa0ff;border-radius:9px;padding:0 7px;font-size:10.5px;font-weight:700}
.pt-place .at{font:10px var(--mono);color:#2b3440;margin-top:2px;background:rgba(255,255,255,.7);
  border-radius:4px;padding:0 5px}
.pt-scale{position:absolute;left:12px;bottom:10px;display:flex;align-items:center;gap:8px;font-size:11px;color:#2b3440;
  background:rgba(255,255,255,.8);border-radius:5px;padding:4px 9px}
.pt-scale .bar{width:100px;height:6px;border:2px solid #2b3440;border-top:none}

.pt-room{display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;padding:22px 24px 28px;min-height:calc(100vh - 230px);
  background:
    linear-gradient(180deg,#d9dde2 0,#c9ced4 55%,#8c939b 55.2%,#8c939b 56%,transparent 56%),
    repeating-linear-gradient(90deg,transparent 0 59px,#9aa1a9 59px 60px),
    repeating-linear-gradient(0deg,transparent 0 59px,#9aa1a9 59px 60px),
    linear-gradient(#b7bdc4,#aab1b9)}
[data-theme=dark] .pt-room{filter:brightness(.82)}
.pt-racks{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap}
.pt-rackcol{display:flex;flex-direction:column;align-items:center;gap:6px}
.pt-rackbar{display:flex;gap:6px;align-items:center;background:rgba(255,255,255,.85);border-radius:6px;padding:4px 8px;font-size:11px;color:#2b3440}
.pt-rackbar .pt-in{width:auto;padding:1px 4px}
.pt-addrack{align-self:center;width:120px;height:170px;border:2px dashed #7d868f;border-radius:8px;color:#3a434d;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:600;background:rgba(255,255,255,.35)}
.pt-addrack span{font-size:34px;line-height:1}
.pt-addrack:hover{background:rgba(255,255,255,.6);border-color:#1d6fb8;color:#1d6fb8}
.pt-deskwrap{display:flex;flex-direction:column;gap:10px;flex:1;min-width:320px;max-width:560px}
.pt-desk{position:relative}
.pt-desk .top{min-height:110px;display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;padding:10px 14px 0;
  border-bottom:16px solid #8a5a33;box-shadow:0 3px 0 #5e3b1f;border-radius:0 0 3px 3px;
  background:linear-gradient(transparent 70%,rgba(0,0,0,.06))}
.pt-desk.target .top{outline:3px dashed #2e8fe0;outline-offset:4px}
.pt-desk .legs{display:flex;justify-content:space-between;padding:0 18px}
.pt-desk .legs span{width:12px;height:70px;background:linear-gradient(90deg,#6d4524,#8a5a33)}
.pt-desk .empty{color:#4b5560;font-size:11.5px;padding-bottom:12px}
.pt-deskdev{display:flex;flex-direction:column;align-items:center;cursor:grab;padding:3px;border-radius:6px;border:2px solid transparent}
.pt-deskdev.on{border-color:#2e8fe0;background:rgba(46,143,224,.12)}
.pt-deskdev .nm{font-size:10.5px;font-weight:700;color:#1f2a36}
.pt-roomnote{font-size:11px;color:#3a434d;background:rgba(255,255,255,.75);border-radius:6px;padding:7px 10px;line-height:1.5}
.pt-draghost{position:fixed;z-index:300;pointer-events:none;background:#1f2a36;color:#fff;font-size:11.5px;font-weight:600;
  padding:4px 10px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.3)}

/* ---------------------------------------------- resizable panes (pt-app) */
.pt-dock{width:var(--pt-dock-w,392px) !important}
.pt-shelf{height:var(--pt-shelf-h,148px) !important}
.pt-pdubar{height:var(--pt-pdu-h,154px) !important}
.pt-split{flex:0 0 auto;position:relative;z-index:6;background:var(--line)}
.pt-split-x{width:5px;cursor:col-resize;margin:0 -2px}
.pt-split-y{height:5px;cursor:row-resize;margin:-2px 0}
.pt-split:hover,.nb-resizing .pt-split{background:var(--pt-sel)}
.pt-split::after{content:'';position:absolute;background:var(--muted);opacity:.55;border-radius:2px}
.pt-split-x::after{width:1px;height:28px;left:2px;top:50%;margin-top:-14px;box-shadow:0 0 0 .5px var(--muted)}
.pt-split-y::after{height:1px;width:28px;top:2px;left:50%;margin-left:-14px;box-shadow:0 0 0 .5px var(--muted)}
body.nb-resizing{user-select:none}
body.nb-resizing-x *{cursor:col-resize !important}
body.nb-resizing-y *{cursor:row-resize !important}

/* ------------------------------------------ Terminal window (pt-cisco.js)
   The chrome is a light desktop-window chrome, whatever the page
   theme; only the screen follows the colour scheme. */
.ncx-crt{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
.ncx-menubar{display:flex;background:#f3f3f3;border-bottom:1px solid #dcdcdc;padding:0 4px;font-size:12px;color:#1a1a1a;position:relative;z-index:20}
.ncx-m{padding:3px 8px;cursor:default;position:relative;border-radius:2px}
.ncx-m:hover,.ncx-m.on{background:#cce4f7}
.ncx-dd{position:absolute;left:0;top:100%;min-width:230px;background:#f9f9f9;border:1px solid #cfcfcf;box-shadow:2px 4px 12px rgba(0,0,0,.22);padding:3px 0;z-index:40}
.ncx-dd .it{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;white-space:nowrap}
.ncx-dd .it:hover{background:#cce4f7}
.ncx-dd .it.dis{color:#9a9a9a}
.ncx-dd .it.dis:hover{background:none}
.ncx-dd .ck{width:14px;text-align:center;font-size:11px}
.ncx-dd .ic{width:16px;display:flex}
.ncx-dd .lb{flex:1}
.ncx-dd .k{color:#6b6b6b;font-size:11px;margin-left:16px}
.ncx-dd .hr{height:1px;background:#dcdcdc;margin:3px 6px}
.ncx-tb{background:#f3f3f3 !important;border-bottom:1px solid #d4d4d4 !important;padding:2px 6px !important}
.ncx-tb button{padding:4px 5px !important;border:1px solid transparent;border-radius:2px;color:#1a1a1a !important}
.ncx-tb button:hover:not(:disabled){background:#e5f1fb !important;border-color:#cce4f7}
.ncx-tb button:disabled{opacity:.38;cursor:default}
.ncx-tb .sep{background:#d0d0d0 !important}
.ncx-tabs{background:#e6e6e6 !important;border-bottom:1px solid #c8c8c8 !important}
.ncx-tab{background:#fff !important;color:#1a1a1a;border-color:#c8c8c8 !important}
.ncx-st{font-size:11px;font-weight:700}
.ncx-st.ok{color:#1f9a4a}.ncx-st.off{color:#d9362b}
.ncx-tx{margin-left:6px;color:#6b6b6b;font-size:13px;line-height:1;padding:0 3px;border-radius:2px}
.ncx-tx:hover{background:#e81123;color:#fff}
.ncx-find{display:flex;align-items:center;gap:8px;padding:4px 8px;background:#fff8d6;border-bottom:1px solid #e3d48f;font-size:12px;color:#1a1a1a}
.ncx-find input{flex:0 1 260px;padding:2px 6px;border:1px solid #bdbdbd;border-radius:2px;font:12px Consolas,monospace}
.ncx-find button{margin-left:auto;padding:1px 8px;border:1px solid #bdbdbd;border-radius:2px;background:#fff}
.ncx-screen mark{background:#ffd54a;color:#000}
.ncx-note{color:#6ab0f3;font-style:italic}
.ncx-cmdwin{border-top:1px solid #c8c8c8;background:#f3f3f3;display:flex;flex-direction:column}
.ncx-cmdwin .hd{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:11.5px;color:#1a1a1a;font-weight:600}
.ncx-cmdwin .hd button{margin-left:auto;font-size:14px;color:#6b6b6b}
.ncx-cmdwin textarea{height:64px;resize:vertical;margin:0 6px 6px;border:1px solid #bdbdbd;font:12.5px Consolas,monospace;padding:4px 6px;background:#fff;color:#000}
.ncx-status{background:#f0f0f0 !important;color:#1a1a1a !important;border-top:1px solid #d4d4d4 !important}
.ncx-status span{border-left-color:#d4d4d4 !important}
.ncx-crt.plain .ncx-screen{background:#0c0c0c !important;color:#cccccc !important}

/* --------------------------------------------- PC desktop (pt-desktop.js) */
.pc-desk{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 60% 70% at 72% 58%,rgba(120,190,255,.55),transparent 70%),
    radial-gradient(ellipse 50% 45% at 30% 30%,rgba(40,110,210,.55),transparent 70%),
    linear-gradient(160deg,#0a3a78 0%,#0f5cb8 45%,#0a2a5c 100%)}
.pc-desk::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 210deg at 75% 62%,transparent 0 20deg,rgba(255,255,255,.07) 20deg 26deg,transparent 26deg 48deg,
    rgba(255,255,255,.05) 48deg 55deg,transparent 55deg 360deg)}
.pc-icons{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,88px);grid-auto-columns:92px;
  gap:4px 6px;padding:10px;align-content:start;justify-content:start;position:relative;overflow:auto}
.pc-ico{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:3px;border:1px solid transparent;color:#fff}
.pc-ico:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28)}
.pc-ico .pic{position:relative;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.pc-ico .badge{position:absolute;right:-4px;bottom:-2px;width:14px;height:14px;border-radius:50%;background:#f0b429;color:#1a1a1a;
  font:700 10px/14px Georgia,serif;text-align:center;border:1px solid #fff}
.pc-ico .lbl{font-size:11px;line-height:1.2;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.6)}
.pc-taskbar{height:38px;flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:0 6px;position:relative;
  background:rgba(20,28,40,.86);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.1);color:#fff}
.pc-start,.pc-pin{width:38px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}
.pc-start:hover,.pc-pin:hover{background:rgba(255,255,255,.12)}
.pc-tray{display:flex;align-items:center;gap:6px;font-size:11px;padding:0 10px;opacity:.9}
.pc-clock{font-size:11.5px;padding:0 8px;opacity:.95}
.pc-desk.open{padding:10px 10px 0}
.pc-win{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--card);border:1px solid #6b7c90;border-radius:6px 6px 0 0;
  box-shadow:0 10px 30px rgba(0,0,0,.45);overflow:hidden;position:relative}
.pc-wint{height:32px;flex:0 0 auto;display:flex;align-items:center;gap:8px;padding-left:10px;background:#f3f3f3;color:#1a1a1a;
  border-bottom:1px solid #dcdcdc;font-size:12px}
[data-theme=dark] .pc-wint{background:#202020;color:#f2f2f2;border-bottom-color:#333}
.pc-wint .ic{display:flex}
.pc-wint .cap{width:44px;height:32px;font-size:12px;color:inherit}
.pc-wint .cap:hover:not(:disabled){background:rgba(0,0,0,.08)}
.pc-wint .cap.x:hover{background:#e81123;color:#fff}
.pc-wint .cap:disabled{opacity:.4}
.pc-winb{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}

/* ------------------------------------ server room: tables, arrange, cables */
.pt-room{position:relative;flex-direction:column !important;align-items:stretch !important;gap:14px !important;padding-top:12px !important}
.pt-roombar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;align-self:flex-start;background:rgba(255,255,255,.92);
  border:1px solid #c3c9cf;border-radius:8px;padding:6px 10px;box-shadow:0 2px 8px rgba(0,0,0,.12);position:relative;z-index:5;color:#1f2a36}
.pt-roombar .vr{width:1px;height:20px;background:#c3c9cf}
.pt-roombar .hint{color:#4b5560}
.pt-roomfloor{flex:1;display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap}
.pt-deskwrap{display:flex !important;flex-direction:row !important;flex-wrap:wrap;align-items:flex-end;gap:18px 26px !important;
  max-width:none !important;flex:1}
.pt-desk{width:340px;flex:0 0 auto}
.pt-desk .dname{display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:#3a434d;margin-bottom:4px}
.pt-desk .dname button{font-size:11px;color:#6b7580;padding:0 4px;border-radius:3px}
.pt-desk .dname button:hover{background:rgba(255,255,255,.7);color:#1d6fb8}
.pt-roomnote{flex-basis:100%}
.pt-deskdev.pend{border-color:#f0b429;background:rgba(240,180,41,.18)}
.pt-room.cabling .pt-deskdev,.pt-room.cabling svg[data-drop] g[data-dev]{cursor:crosshair}
.pt-portmenu{position:absolute;z-index:30;min-width:210px;max-height:300px;overflow:auto;background:var(--card);border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--pt-shadow);padding:4px 0}
.pt-portmenu .hd{font-size:11px;font-weight:700;color:var(--muted);padding:4px 10px 6px;border-bottom:1px solid var(--line);margin-bottom:3px}
.pt-portmenu button{display:flex;align-items:center;gap:7px;width:100%;padding:4px 10px;font:11.5px var(--mono);text-align:left}
.pt-portmenu button:hover:not(:disabled){background:var(--pt-selbg)}
.pt-portmenu button:disabled{opacity:.5}
.pt-portmenu .dot{width:8px;height:8px;border-radius:50%;background:#1f9a4a;flex:0 0 auto}
.pt-portmenu .dot.used{background:#c0392b}
.pt-portmenu .u{margin-left:auto;font:10px "Segoe UI",sans-serif;color:var(--muted)}
.pt-dev{width:78px}

/* The site header's dropdowns (Learn, Real labs…) open over the simulator's
   own menu bar, never under it. Windows and overlays (z 200+) still sit
   above both. */
.nb-head{z-index:150 !important}
.ncx-photo{display:flex;justify-content:center;background:linear-gradient(#f4f6f8,#e3e8ed);border:1px solid var(--line);
  border-radius:6px;padding:10px;margin-bottom:10px}
.ncx-photo img{max-height:150px;max-width:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
/* the hidden input sits at the prompt line, invisible and unscrollable */
.ncx-inpbox{position:relative;height:0;overflow:visible}
.ncx-inp{position:absolute !important;left:0 !important;top:-1.3em !important;bottom:auto !important;width:1px !important;height:1em !important;
  opacity:0 !important;pointer-events:none;caret-color:transparent;font-size:16px}
/* a tighter console chrome, so the screen keeps the room */
.ncx-menubar{font-size:11.5px;padding:0 2px}
.ncx-m{padding:2px 7px}
.ncx-tb{padding:1px 4px !important}
.ncx-tb button{padding:3px 4px !important}
.ncx-tabs{padding:2px 6px 0 !important}
.ncx-tab{padding:2px 10px !important;font-size:11px !important}
.pt-maxb{width:26px;height:22px;border-radius:4px;color:#fff;font-size:13px;margin-right:4px}
.pt-maxb:hover{background:rgba(255,255,255,.18)}

/* ------------------------------------------ fixed time bar (pt-app.js) */
.pt-modebox{display:none !important}
.pt-timebar{height:36px;flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 10px;
  background:var(--pt-bar);border-top:1px solid var(--line);position:relative;z-index:7}
.pt-timebar .mode{font-size:11.5px;font-weight:600;color:var(--ink2)}
.pt-timebar .mode.sim{color:#b4530a}
.pt-timebar .pt-clock{display:flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 9px;border-radius:6px}
.pt-timebar .pt-clock .pt-tb{width:26px;height:24px}
.pt-timebar .pt-wsw{background:var(--card)}
.pt-timebar .pt-wsw button{display:inline-flex;align-items:center;gap:4px}

/* --------------------------------------------- workspace grid (pt-app.js)
   Light lines every 20 px — the snap step — and a stronger line every
   100 px, like squared paper, so a layout can be read at a glance. */
:root{--pt-grid-minor:rgba(90,110,135,.10);--pt-grid-major:rgba(90,110,135,.22)}
[data-theme=dark]{--pt-grid-minor:rgba(150,175,205,.07);--pt-grid-major:rgba(150,175,205,.16)}
.pt-canvas.grid{
  background-image:
    linear-gradient(var(--pt-grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--pt-grid-major) 1px,transparent 1px),
    linear-gradient(var(--pt-grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--pt-grid-minor) 1px,transparent 1px) !important;
  background-size:100px 100px,100px 100px,20px 20px,20px 20px !important}

/* ------------------------------------------------------ thin scrollbars */
.pt-app *,.ovl *,.pt-pktcard{scrollbar-width:thin;scrollbar-color:rgba(120,135,150,.55) transparent}
.pt-app ::-webkit-scrollbar,.ovl ::-webkit-scrollbar,.pt-wswrap::-webkit-scrollbar{width:6px !important;height:6px !important}
.pt-app ::-webkit-scrollbar-track,.ovl ::-webkit-scrollbar-track{background:transparent}
.pt-app ::-webkit-scrollbar-thumb,.ovl ::-webkit-scrollbar-thumb,.pt-wswrap::-webkit-scrollbar-thumb{
  background:rgba(120,135,150,.5) !important;border-radius:3px;border:none !important}
.pt-app ::-webkit-scrollbar-thumb:hover,.ovl ::-webkit-scrollbar-thumb:hover{background:rgba(120,135,150,.8) !important}
.pt-app ::-webkit-scrollbar-corner{background:transparent}
.pt-shelf .tips{display:none !important}

/* ------------------------------------------------ colour picker (pt-app) */
.pt-cbtn{position:relative}
.pt-cbtn .cb{position:absolute;left:7px;right:7px;bottom:4px;height:3px;border-radius:2px}
.pt-cpick{position:fixed;z-index:180;width:384px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--pt-shadow);font-size:12px;color:var(--ink);overflow:hidden}
.pt-cpick .hd{display:flex;align-items:center;gap:8px;padding:8px 12px;font-weight:700;border-bottom:1px solid var(--line);background:var(--pt-bar)}
.pt-cpick .hd .tagsel{font-weight:600;font-size:10.5px;color:#fff;background:var(--pt-sel);border-radius:9px;padding:1px 8px}
.pt-cpick .hd .x{margin-left:auto;color:var(--muted);font-size:13px}
.pt-cpick .row1{display:flex;gap:12px;padding:10px 12px}
.pt-cpick{max-height:calc(100vh - 70px);overflow:auto}
.pt-cpick .slots{display:flex;flex-direction:row;gap:6px;flex:0 0 auto}
.pt-cpick .slot{display:flex;flex-direction:column;align-items:center;gap:3px;width:50px;padding:6px 4px;border:1px solid var(--line);
  border-radius:7px;font-size:10.5px;color:var(--ink2)}
.pt-cpick .slot.on{border-color:var(--pt-sel);background:var(--pt-selbg);color:var(--pt-sel);font-weight:700}
.pt-cpick .chip{width:30px;height:30px;border-radius:5px;border:1px solid rgba(0,0,0,.35);position:relative;display:block}
.pt-cpick .pal{display:grid;grid-template-columns:repeat(10,20px);gap:3px;align-content:start}
.pt-cpick .sw{width:20px;height:20px;border-radius:4px;border:1px solid rgba(0,0,0,.3);position:relative;padding:0}
.pt-cpick .sw:hover{transform:scale(1.12);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.pt-cpick .sw.on{outline:2px solid var(--pt-sel);outline-offset:2px}
.pt-cpick .nofill{position:absolute;inset:0}
.pt-cpick .nofill::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;height:2px;background:#e03b30;transform:rotate(-45deg)}
.pt-cpick .row2{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:0 12px 10px}
.pt-cpick .lbl{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-right:4px}
.pt-cpick .edit{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:6px;padding:3px 8px;cursor:pointer;
  font-size:11px;position:relative;margin-left:4px}
.pt-cpick .edit:hover{border-color:var(--pt-sel)}
.pt-cpick .edit input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.pt-cpick .rainbow{width:16px;height:16px;border-radius:50%;
  background:conic-gradient(#f33,#fd3,#3d3,#3dd,#33f,#d3d,#f33)}
.pt-cpick .row3{display:flex;flex-wrap:wrap;gap:8px 14px;padding:10px 12px;border-top:1px solid var(--line)}
.pt-cpick .cpg{display:flex;align-items:center;gap:3px;border:none;padding:0;margin:0;background:none;box-shadow:none}
.pt-cpick .wbtn{border:1px solid transparent;border-radius:5px;padding:2px 2px;color:var(--ink)}
.pt-cpick .wbtn:hover{background:var(--pt-selbg)}
.pt-cpick .wbtn.on{border-color:var(--pt-sel);background:var(--pt-selbg);color:var(--pt-sel)}
.pt-cpick input[type=range]{width:110px}
.pt-cpick .prev{margin:0 12px;border:1px dashed var(--line);border-radius:6px;
  background:linear-gradient(var(--pt-grid-minor) 1px,transparent 1px) 0 0/12px 12px,linear-gradient(90deg,var(--pt-grid-minor) 1px,transparent 1px) 0 0/12px 12px,var(--bg)}
.pt-cpick .foot{padding:8px 12px 10px}

/* ------------------------------------------ hover tips (pt-cisco.js) */
.ncx-tip{position:fixed;z-index:500;display:none;max-width:320px;pointer-events:none;background:#1c2530;color:#e9eef3;
  border-radius:7px;padding:8px 11px;font:12px/1.45 "Segoe UI",Arial,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.35);white-space:pre-line}
.ncx-tip b{display:block;font-size:12.5px;color:#fff;margin-bottom:3px}
.ncx-tip div{color:#c3ccd6}
/* ------------------------------------------ physical tab: photo, removal */
.ncx-photo{position:relative}
.ncx-photobtns{position:absolute;right:8px;bottom:8px;display:flex;gap:4px}
.ncx-photo.empty{display:flex;align-items:center;gap:12px;justify-content:flex-start;padding:10px 14px;border-style:dashed}
.ncx-photo.empty .ic{font-size:26px;opacity:.7}
.ncx-photo.empty button{margin-left:auto}
.ncx-mods.target{outline:2px dashed #d9362b;outline-offset:2px;background:rgba(217,54,43,.06)}
/* ------------------------------------------ shapes gallery and selection */
.pt-cpick .shapes{padding:10px 12px 0;display:flex;align-items:center;gap:6px}
.pt-cpick .sgrid{display:flex;flex-wrap:wrap;gap:3px}
.pt-cpick .sbtn{width:28px;height:28px;border:1px solid var(--line);border-radius:5px;display:flex;align-items:center;justify-content:center;color:var(--ink2)}
.pt-cpick .sbtn:hover{border-color:var(--pt-sel);color:var(--pt-sel)}
.pt-cpick .sbtn.on{background:var(--pt-sel);border-color:var(--pt-sel);color:#fff}
.pt-selbar{display:flex;align-items:center;gap:4px;font-size:11.5px;background:var(--pt-selbg);border:1px solid var(--pt-sel);
  border-radius:6px;padding:1px 4px 1px 9px;color:var(--ink)}
.pt-selbar b{color:var(--pt-sel)}
.pt-nbtn.danger{color:#c0392b}
.pt-nbtn.danger:hover{background:#c0392b;color:#fff}
.pt-node .cap:hover{text-decoration:underline dotted}

/* ------------------------------------ minimised window, console tabs */
.pt-minbar{position:fixed;left:12px;bottom:34px;z-index:210;pointer-events:auto;display:flex;align-items:center;gap:6px;
  background:var(--pt-sel);color:#fff;border-radius:8px;padding:5px 6px 5px 10px;box-shadow:var(--pt-shadow);font-size:12px;cursor:pointer}
.pt-minbar .nm{font-weight:700}
.pt-minbar small{font-weight:400;opacity:.8}
.pt-minbar button{width:24px;height:22px;border-radius:4px;color:#fff}
.pt-minbar button:hover{background:rgba(255,255,255,.2)}
.pt-minbar button.x:hover{background:#e81123}
.ncx-tabs{gap:2px;overflow:visible;position:relative;z-index:15}
.ncx-tab{cursor:pointer;opacity:.8}
.ncx-tab.on{opacity:1;box-shadow:0 -2px 0 #1f9a4a inset}
.ncx-tab:not(.on){background:#efefef !important}
.ncx-tab:not(.on):hover{background:#fff !important}
.ncx-add{font-weight:700;font-size:14px !important;padding:0 10px !important;opacity:1}
.ncx-addwrap{position:relative}

/* a minimised window really hides — its display:flex must not win over [hidden] */
.pt-win[hidden]{display:none !important}

/* ------------------------------------------ portal labs (pt-labfile.js) */
.nbl-win{width:720px;height:auto !important;max-height:calc(100vh - 120px)}
.nbl-body{padding:14px 16px;display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.nbl-save{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel)}
.nbl-save label{font-weight:700;font-size:12px}
.nbl-save .pt-in{flex:1}
.nbl-list{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.nbl-h{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding:8px 12px;
  background:var(--pt-bar);border-bottom:1px solid var(--line)}
.nbl-list table{width:100%}
.nbl-list tr.cur td{background:var(--pt-selbg)}
.nbl-empty{padding:18px;text-align:center}
.nbl-empty p{margin:8px 0;line-height:1.55}
.nbl-empty .row{justify-content:center}

/* ------------------------------------------- Paint-style text (pt-app.js) */
.pt-textshape{min-height:1em}
.pt-texted{position:absolute;z-index:40;border:1.5px dashed var(--pt-sel);outline:none;resize:horizontal;overflow:hidden;
  min-width:80px;margin:0;border-radius:2px;box-shadow:0 0 0 3px var(--pt-selbg)}
.pt-texttb{position:absolute;z-index:41;display:flex;align-items:center;gap:3px;flex-wrap:nowrap;white-space:nowrap;
  background:var(--card);border:1px solid var(--line);border-radius:8px;padding:4px 6px;box-shadow:var(--pt-shadow);font-size:11.5px;color:var(--ink)}
.pt-texttb select{height:26px;border:1px solid var(--line);border-radius:5px;background:var(--bg);color:var(--ink);font-size:12px;padding:0 4px}
.pt-texttb select:first-child{width:130px}
.pt-texttb .tb{min-width:26px;height:26px;border:1px solid transparent;border-radius:5px;padding:0 6px;font-size:13px;color:var(--ink)}
.pt-texttb .tb:hover{background:var(--pt-selbg)}
.pt-texttb .tb.on{background:var(--pt-sel);color:#fff;border-color:var(--pt-sel)}
.pt-texttb .tb.ok{color:#1f9a4a;font-weight:800}
.pt-texttb .sep{width:1px;height:20px;background:var(--line);margin:0 3px}
.pt-texttb .lbl{font-size:10.5px;color:var(--muted);margin-right:2px}
.pt-texttb .sw{width:18px;height:18px;border-radius:4px;border:1px solid rgba(0,0,0,.3);padding:0;position:relative}
.pt-texttb .sw.on{outline:2px solid var(--pt-sel);outline-offset:1px}
.pt-texttb .sw.more{background:conic-gradient(#f33,#fd3,#3d3,#3dd,#33f,#d3d,#f33);cursor:pointer;display:inline-block}
.pt-texttb .sw.more input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
/* ------------------------------ the selection bar floats; the old bar is gone */
.pt-wsrow{position:relative}
.pt-floatsel{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:35}
.pt-floatsel .pt-selbar{box-shadow:var(--pt-shadow);background:var(--card);padding:3px 5px 3px 11px}
.pt-status .hint{color:var(--muted);max-width:420px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-floatsel .pt-nbtn{display:inline-flex !important;flex-direction:row !important;align-items:center;gap:4px;height:26px;padding:0 8px}
.ncx-tip.name-only{padding:3px 9px;font-weight:600}
.ncx-tip.name-only div{color:#fff}
.pt-localclock{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15;padding:0 4px 0 12px;border-left:1px solid var(--line);margin-left:4px}
.pt-localclock b{font:600 12.5px "Segoe UI",Arial,sans-serif;color:var(--ink)}
.pt-localclock small{font-size:10px;color:var(--muted)}
/* a roomier device shelf with bigger pictures */
.pt-dev{width:96px !important;padding:4px 2px !important}
.pt-dev .nm{font-size:10.5px !important;margin-top:3px !important}
.pt-devs{gap:6px 8px;align-content:flex-start}
/* shelf tiles sized for 35 px pictures */
.pt-dev{width:80px !important;padding:3px 2px !important}
.pt-dev .nm{font-size:10px !important;margin-top:2px !important}
/* ------------------------------------ the port card (Physical tab cables) */
.ncx-portcard{position:fixed;z-index:260;width:310px;background:var(--card);border:1px solid var(--line);border-radius:9px;
  box-shadow:var(--pt-shadow);font-size:12px;color:var(--ink)}
.ncx-portcard .hd{display:flex;align-items:center;gap:4px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--pt-bar);border-radius:9px 9px 0 0}
.ncx-portcard .hd b{font-family:var(--mono)}
.ncx-portcard .hd .x{margin-left:auto;color:var(--muted)}
.ncx-portcard .bd{padding:10px 12px 12px;display:flex;flex-direction:column}
.ncx-portcard label{font-size:10.5px;font-weight:700;color:var(--muted);margin:6px 0 3px;text-transform:uppercase;letter-spacing:.04em}
.ncx-portcard .wire{display:flex;align-items:center;gap:10px}
.ncx-portcard .wire .dot{width:14px;height:14px;border-radius:4px;border:1px solid rgba(0,0,0,.35);flex:0 0 auto}
.ncx-rack svg [data-port]:hover{filter:drop-shadow(0 0 3px #2e8fe0)}


/* ###########################################################################
   #   TOUCH                                                                 #
   ###########################################################################

   The workspace and everything draggable in it now listen on pointer events,
   which is half of making a finger work. This is the other half.

   WITHOUT touch-action:none the browser claims the gesture first: the pointer
   events fire, the finger moves, and then the browser CANCELS the sequence
   because it decided the drag was a page scroll. The device snaps back and it
   looks as though the drag was never wired at all.

   Scoped to the things that are dragged rather than the whole page, because a
   long panel still has to scroll with a finger. */
.pt-scene,
.pt-dev,
.pt-wint,
.pt-split,
[data-drop],
[data-port]{ touch-action:none; }

/* A finger is about 9 mm across. Ports, plugs and the slot targets were sized
   for a one-pixel cursor: present on a phone and unhittable. Only where the
   pointer is actually coarse, so a mouse keeps the tighter layout it was
   designed for. */
@media (pointer:coarse){
  [data-port]{ min-width:22px; min-height:22px; }
  .pt-split{ min-width:18px; min-height:18px; }
  /* The window chrome a finger has to hit: title bar, and its buttons. */
  .pt-wint{ min-height:38px; }
  .pt-wint button,
  .pt-minbar button{ min-width:32px; min-height:32px; }
  /* Selection while dragging is noise on a touch screen — a long press would
     otherwise start selecting the label under the finger. */
  .pt-scene, .pt-dev{ -webkit-user-select:none; user-select:none;
                      -webkit-touch-callout:none; }
}

/* ---- the rotate hint. Hidden always, except on a small upright screen. No
   script decides this: a media query is the whole mechanism, so it cannot get
   out of step with the app and cannot fail while the app is loading. */
.pt-rotate{ display:none; }
@media (orientation: portrait) and (max-width: 900px){
  .pt-rotate{
    display:flex; align-items:center; justify-content:center;
    position:fixed; inset:0; z-index:9000; padding:24px;
    background:var(--bg,#fff);
    background-image:radial-gradient(600px 400px at 30% 0%,rgba(59,130,246,.10),transparent 60%);
  }
  .pt-rotate-in{ max-width:330px; text-align:center; color:var(--ink2,#3d4a58); }
  .pt-rotate-in svg{ color:var(--brand,#0b5cab); margin-bottom:10px; }
  .pt-rotate-in b{ display:block; font-size:17px; color:var(--ink,#12181f); margin-bottom:6px; }
  .pt-rotate-in p{ font-size:13px; line-height:1.6; margin:0 0 12px; }
  .pt-rotate-in .pt-rotate-tip{ font-size:12px; opacity:.8; margin:0; }
}

/* ===================================================== Packet Capture (PC)
   The analyser on the desktop. A packet list is read by scanning down one
   column at a time, so it is monospaced, tight, and striped — the three
   things that make a thousand rows legible — and it keeps the same type
   scale as the Capture dock so the two do not look like different tools. */
.pcap-app .pcap-list{width:100%;border-collapse:collapse;font:11.5px/1.5 var(--mono)}
.pcap-app .pcap-list th{position:sticky;top:0;z-index:1;text-align:left;font-weight:600;
  background:var(--panel2);border-bottom:1px solid var(--line);padding:4px 7px;
  font-family:var(--sans);font-size:11px;letter-spacing:.2px;color:var(--ink2);white-space:nowrap}
.pcap-app .pcap-list td{padding:3px 7px;border-bottom:1px solid var(--line2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.pcap-app .pcap-list tbody tr:nth-child(even){background:rgba(127,140,160,.055)}
.pcap-app .pcap-list tbody tr:hover{background:var(--tint-accent)}
.pcap-app .pcap-list td.info{max-width:none;white-space:normal}
/* ---------------------------------------------- the analyser, read at a glance

   A packet list is scanned, not read: the eye is looking for "where does the
   ARP stop and the ICMP start", and in a list of two hundred rows of grey
   monospace that question takes a search. The protocol's own colour as a bar
   down the row answers it without reading a word, which is what every
   analyser people already know does — and the hue is the same token the
   event-list filters use, so one protocol is one colour across the product. */
/* The event list: a table that keeps a readable width and lets the pane
   scroll to it, rather than one that folds every value in half. */
.pt-evwrap{overflow:auto}
.pt-evtable{width:100%;min-width:552px;border-collapse:collapse}
.pt-evtable td,.pt-evtable th{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-evtable td .xs.muted{white-space:normal}
.pt-proto{display:inline-block;padding:0 6px;border-radius:999px;border:1px solid currentColor;
  font-weight:700;font-size:10px;letter-spacing:.2px;line-height:15px}
.pt-evrow.drop .pt-proto{opacity:.85}

.pcap-app .pcap-row{transition:background .1s}
.pcap-app .pcap-proto{display:inline-block;padding:0 6px;border-radius:999px;
  border:1px solid currentColor;font-weight:700;font-size:10.5px;letter-spacing:.2px;
  line-height:16px}
.pcap-app .pcap-row.on{outline:1px solid var(--accent);outline-offset:-1px}
/* The seam between the list and the detail. Thin at rest, obvious under the
   cursor: a handle that advertises itself all the time is furniture. */
.pcap-seam{height:7px;margin:3px 0 0;flex:0 0 auto;cursor:row-resize;border-radius:4px;
  background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.pcap-seam:hover,body.nb-resizing .pcap-seam{background:var(--accent)}
.pcap-app .pcap-hex{margin:0;font:11.5px/1.6 var(--mono);white-space:pre;color:var(--ink2)}
.pcap-app .pcap-tree{font-size:12px;line-height:1.65}
.pcap-app .pcap-tree .kid{color:var(--ink2);padding-left:14px;font-size:11.5px}
.pcap-app select.pt-in{min-width:170px}