/* =====================================================================
   Home lab page styles (index.html)
   Only what is unique to this page lives here. Colours come from the
   tokens in brand.css, so the page follows any brand change.
   ===================================================================== */

/* Network colour key, used by the diagram, legend, cards and tables */
:root{
  --lab-core:var(--cyan-strong);  /* MPLS core and ITS Ltd */
  --lab-its:var(--cyan);          /* ITS Ltd access links */
  --lab-gap:var(--purple);        /* GAP Ltd */
  --lab-inet:var(--orange);       /* internet and DMVPN backup */
  --lab-fw:var(--pink);           /* firewalls */
  --lab-mgmt:var(--subtle);       /* home and management network */
  --lab-lan:var(--soft);          /* site LAN */
}

/* Connectivity schematic (inline SVG) */
.sch-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.schematic{display:block;width:100%;height:auto;min-width:880px}
.schematic text{font-family:var(--font-body);dominant-baseline:central}
.schematic .zone{fill:var(--cyan-tint);stroke:var(--cyan-border);stroke-width:1.5}
.schematic .zone-t{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;fill:var(--cyan-strong)}
.schematic .zone-s{font-size:12px;fill:var(--muted)}
.schematic .lk line,.schematic .lk path{fill:none;stroke-width:2.25;stroke-linecap:round}
.schematic .core line{stroke:var(--lab-core)}
.schematic .its line{stroke:var(--lab-its)}
.schematic .gap line{stroke:var(--lab-gap)}
.schematic .inet line{stroke:var(--lab-inet)}
.schematic .dmvpn{stroke:var(--lab-inet);stroke-dasharray:7 6}
.schematic .rail{stroke:var(--lab-inet);stroke-width:5;stroke-linecap:round}
.schematic .mgmt{stroke:var(--lab-mgmt);stroke-width:2;stroke-dasharray:3 4}
.schematic .lan{stroke:var(--lab-lan);stroke-width:1.5;fill:none}
.schematic .dot{fill:var(--lab-inet)}
.schematic .lbg.z{fill:var(--cyan-tint)}
.schematic .lbg{fill:var(--surface)}
.schematic .lbl{font-family:var(--font-mono);font-size:10.5px;font-weight:500;fill:var(--muted);text-anchor:middle}
.schematic .lbl.a{fill:var(--orange-strong)}
.schematic .node rect{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.25}
.schematic .node .t{font-size:12.5px;font-weight:600;fill:var(--ink);text-anchor:middle}
.schematic .node .s{font-family:var(--font-mono);font-size:10px;fill:var(--subtle);text-anchor:middle}
.schematic .node.p rect{fill:var(--lab-core);stroke:var(--lab-core)}
.schematic .node.p .t{fill:var(--surface)}
.schematic .node.p .s{fill:var(--cyan-tint)}
.schematic .node.pe rect{stroke:var(--lab-core);stroke-width:1.5}
.schematic .node.gp rect{fill:var(--surface);fill:color-mix(in srgb,var(--purple) 8%,var(--surface));stroke:var(--lab-gap)}
.schematic .node.ce rect{fill:var(--cyan-tint);stroke:var(--lab-its)}
.schematic .node.in rect{fill:var(--surface);fill:color-mix(in srgb,var(--orange) 8%,var(--surface));stroke:var(--lab-inet)}
.schematic .node.home rect{fill:var(--surface-2);stroke:var(--lab-mgmt)}
.schematic .site .card-bg{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.25}
.schematic .site .eb{font-family:var(--font-body);font-size:10.5px;font-weight:700;letter-spacing:.1em;fill:var(--orange-strong)}
.schematic .site .ttl{font-family:var(--font-heading);font-size:17px;font-weight:700;fill:var(--ink)}
.schematic .site .net{font-family:var(--font-mono);font-size:11px;fill:var(--subtle);text-anchor:end}
.schematic .pill rect{fill:var(--bg);stroke:var(--line-strong)}
.schematic .pill text{font-size:12px;font-weight:500;fill:var(--text);text-anchor:middle}
.schematic .pill.cs rect{fill:var(--navy);stroke:var(--navy)}
.schematic .pill.cs text{fill:var(--surface);font-weight:600}
.schematic .pill.fw rect{fill:var(--surface);fill:color-mix(in srgb,var(--pink) 6%,var(--surface));stroke:var(--lab-fw)}
.schematic .pill.ir rect{fill:var(--surface);fill:color-mix(in srgb,var(--orange) 8%,var(--surface));stroke:var(--lab-inet)}
.schematic .rail-t{font-size:12px;font-weight:600;fill:var(--orange-strong)}
.legend{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:16px 4px 2px;padding:0;font-size:.88rem;color:var(--muted)}
.legend li{display:flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:28px;height:0;border-top:3px solid}
.legend .k-core{border-color:var(--lab-core)}
.legend .k-gap{border-color:var(--lab-gap)}
.legend .k-inet{border-color:var(--lab-inet)}
.legend .k-dmvpn{border-color:var(--lab-inet);border-top-style:dashed}
.legend .k-lan{border-color:var(--lab-lan);border-top-width:2px}
.legend .k-mgmt{border-color:var(--lab-mgmt);border-top-style:dotted}

/* The schematic as an animated figure. motion.css draws the frame, the switch
   and the play button; these rules fit the schematic into it. */
.schematic .zone{stroke-dasharray:none}
.schematic [data-dim]{transition:opacity .45s ease}
.schematic .con{fill:none;stroke:var(--lab-mgmt);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round;stroke-linejoin:round}
.schematic .con-frame{fill:none;stroke:var(--lab-mgmt);stroke-width:1.5;stroke-dasharray:5 6}
.schematic .lab-tunnel{fill:none;stroke:var(--lab-inet);stroke-width:3.5;stroke-linecap:round}
.lab-motion .motion-stage{background:var(--surface)}
.lab-motion .motion-scroll{padding:18px 18px 10px}
.lab-motion .motion-panel{gap:14px;padding:16px 22px 20px;background:var(--bg)}
.lab-ctrl{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
/* every note shares one cell, so the panel keeps its height as the views change */
.lab-notes{display:grid}
.lab-notes > .motion-note{max-width:80ch;margin:0}
.motion-ready .lab-notes > .motion-note{grid-area:1/1}
.motion-ready .motion-panel .lab-notes > .m-off{display:block;visibility:hidden}
.lab-motion:not(.motion-ready) .lab-notes{gap:10px}
.lab-motion .legend{margin:0}
#m-lab{scroll-margin-top:12px} /* a little air below the sticky bars */
/* "Show in the diagram" links on the cards that match a view */
.show-fig{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.9rem;font-weight:600;color:var(--orange-strong);text-decoration:none}
.show-fig:hover{color:var(--orange-strong);text-decoration:underline;text-underline-offset:3px}
.show-fig svg{width:16px;height:16px;transition:transform .2s ease}
.show-fig:hover svg{transform:translateX(3px)}

/* Path cards under the schematic */
.paths{margin-top:22px}
.path{border-left:4px solid var(--lab-core)}
.path .card-tag{color:var(--lab-core)}
.path.inet{border-left-color:var(--lab-inet)}
.path.inet .card-tag{color:var(--orange-strong)}
.path.mgmt{border-left-color:var(--lab-mgmt)}
.path.mgmt .card-tag{color:var(--subtle)}

/* Full topology image with numbered pins */
.full-topo{margin-top:72px}
.topo-wrap{display:grid;grid-template-columns:1fr;gap:22px}
.topo-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px;padding:4px 4px 14px}
.topo-bar b{font-family:var(--font-heading);font-size:1rem}
.topo-bar .links{display:flex;gap:8px;flex-wrap:wrap}
.topo-frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.topo-frame a{display:block;cursor:zoom-in}
.pin{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:var(--orange);color:var(--surface);font-size:.8rem;font-weight:700;display:grid;place-items:center;border:2px solid var(--surface);box-shadow:0 2px 8px rgba(249,115,22,.5);pointer-events:none;transition:transform .3s ease,background-color .3s ease}
.layers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.layers li{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);transition:border-color .3s ease,background-color .3s ease}
.layers .n{width:30px;height:30px;border-radius:50%;background:var(--orange-tint);color:var(--orange-strong);font-weight:700;font-size:.9rem;display:grid;place-items:center;border:1px solid var(--orange-border);transition:background-color .3s ease,color .3s ease}
/* Numbered guide: home-lab.js lights each pin and its layer in turn */
.pin::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--orange);opacity:0}
.pin.is-on{transform:translate(-50%,-50%) scale(1.2);background:var(--orange-strong)}
.pin.is-on::after{animation:pin-ring 1.6s ease-out infinite}
@keyframes pin-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.3);opacity:0}}
.layers li.is-on{border-color:var(--orange-border);background:var(--surface);background:color-mix(in srgb,var(--orange) 5%,var(--surface))}
.layers li.is-on .n{background:var(--orange);border-color:var(--orange);color:var(--surface)}
.topo-guide[hidden]{display:none}
.topo-guide .i-pause,.topo-guide.is-playing .i-play{display:none}
.topo-guide.is-playing .i-pause{display:block}
@media (prefers-reduced-motion:reduce){
  .pin,.layers li,.layers .n,.schematic [data-dim]{transition:none}
  .pin.is-on::after{animation:none}
}
.layers li:focus-visible{outline-offset:3px}
.layers h4{margin:2px 0 4px;font-size:1rem}
.layers p{font-size:.93rem;color:var(--muted)}

/* Site cards */
.site-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);display:flex;flex-direction:column}
.site-top{padding:22px 24px;background:radial-gradient(420px 200px at 100% 0,rgba(249,115,22,.18),transparent 70%),linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--surface);position:relative}
.site-top .eyebrow{margin-bottom:4px}
.site-top h3{color:var(--surface);font-size:1.5rem;margin-top:6px}
.site-top .range{position:absolute;right:22px;top:24px;font-family:var(--font-mono);font-size:.8rem;color:var(--on-dark-muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:3px 8px;border-radius:7px}
.site-body{padding:8px 24px 24px;flex:1;display:flex;flex-direction:column}
.spec{margin:0;display:grid;grid-template-columns:96px 1fr;font-size:.92rem}
.spec dt,.spec dd{padding:10px 0;border-bottom:1px solid var(--line);margin:0}
.spec dt{color:var(--subtle);font-weight:500}
.spec dd{color:var(--text)}
.spec code{font-size:.82rem;color:var(--teal-strong)}
.vms{margin-top:16px}
.vms h4{font-family:var(--font-body);font-size:.85rem;font-weight:600;color:var(--muted);margin:0 0 8px}
.vm-list{display:flex;flex-wrap:wrap;gap:6px}
.site-body .note{margin-top:16px}
.gap-card{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;border-left:4px solid var(--lab-gap)}
.gap-card .icon{margin:0}

/* Network type pills in the tables */
.kind.k-core{background:var(--cyan-tint);color:var(--cyan-strong);border-color:var(--cyan-border)}
.kind.k-its{background:var(--surface-2);background:color-mix(in srgb,var(--teal) 14%,var(--surface));color:var(--teal-strong);border-color:var(--line);border-color:color-mix(in srgb,var(--teal) 40%,var(--surface))}
.kind.k-gap{background:var(--surface-2);background:color-mix(in srgb,var(--purple) 12%,var(--surface));color:var(--purple-strong);border-color:var(--line);border-color:color-mix(in srgb,var(--purple) 30%,var(--surface))}
.kind.k-inet{background:var(--orange-tint);color:var(--orange-strong);border-color:var(--orange-border)}
.kind.k-mgmt{background:var(--surface-2);color:var(--muted);border-color:var(--line)}

/* Rack photos and inventory */
.rack-row{display:flex;gap:14px;align-items:flex-start}
.rack-row figure{margin:0;flex:var(--r) 1 0%}
.inventory{margin-top:40px}
.inv-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}
.inv-list li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.inv-list b{font-family:var(--font-mono);color:var(--teal-strong);font-weight:600}
.inv-list span{color:var(--muted);display:block;font-size:.88rem}

/* Workspace */
.work-block + .work-block{margin-top:56px}
.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;margin-bottom:18px}
.work-head h3{font-size:var(--fs-h3)}
.work-head p{color:var(--muted);max-width:60ch;font-size:.98rem}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.photo-grid .shot img{aspect-ratio:3/2;object-fit:cover}
.spares{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:36px;align-items:center}
.spares h3{font-size:var(--fs-h3)}
.spares h3 + p{color:var(--muted);margin-top:10px}
.spares ul{margin:16px 0 0;padding-left:20px;color:var(--muted)}
.spares li{margin:6px 0}

@media (max-width:980px){
  .layers{grid-template-columns:repeat(2,1fr)}
  .sites.grid-3{grid-template-columns:1fr}
  .spares{grid-template-columns:1fr}
  .spares .shot{max-width:420px}
}
@media (max-width:700px){
  .schematic{min-width:1100px}
  #expertise .topic{padding:14px 16px;gap:12px;align-items:center}
  #expertise .topic .icon{width:38px;height:38px;border-radius:10px}
  #expertise .topic .icon svg{width:20px;height:20px}
  #expertise .topic > span > span{display:none}
  #expertise .topic b{margin-bottom:0}
  .layers{grid-template-columns:1fr}
  .lab-motion .motion-panel{padding:14px 16px 18px}
  .rack-row{flex-wrap:wrap}
  .rack-row figure{flex:0 0 calc(50% - 7px)}
  .rack-row .shot img{aspect-ratio:1/2;object-fit:cover}
  .photo-grid{grid-template-columns:1fr}
  .inv-list{grid-template-columns:1fr}
  .gap-card{grid-template-columns:1fr}
  .site-top .range{position:static;display:inline-block;margin-top:10px}
  .pin{width:20px;height:20px;font-size:.66rem;border-width:1.5px}
}

/* A note on the hardware */
.lab-note{margin-top:20px;display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;border-left:4px solid var(--orange)}
.lab-note .icon{margin:0}
.lab-note h3{margin-bottom:8px}
.lab-note p{max-width:75ch}
.lab-note p + p{margin-top:10px}
@media (max-width:700px){.lab-note{grid-template-columns:1fr}}

/* Small layout helpers for this page */
.inventory h3{font-size:var(--fs-h3);margin-bottom:6px}
.inventory > p{color:var(--muted);margin-bottom:10px}
.photo-grid figure,.spares figure{margin:0}

/* Experience logos: one optical size band, proportions kept */
#experience .brand-logo img{height:auto;width:auto;max-height:44px;max-width:140px;object-fit:contain}