/* Back of the patch panel: each live port becomes a punch-down termination
   with a circuit tag (what it is, where I used it, proof). Blanks drop out. */
.xr-active .pp-hint { display: none; }
.pp-xr-hint { color: #abc0cb; font-size: 15px; }
.pp-xr-hint strong { color: #72e5ef; font-weight: 600; }

.xr-active .pp .rack { background: #04080a; }
@media (prefers-reduced-motion: no-preference) {
  .xr-active .pp .rack { animation: pp-rear-turn .9s cubic-bezier(.2, .7, .2, 1) .12s backwards; }
}
@keyframes pp-rear-turn { from { transform: perspective(1600px) rotateY(-26deg) scale(.97); opacity: .25; } }

.xr-active .pp-group {
  flex-direction: column; align-items: stretch; gap: 14px; padding-top: 16px; padding-bottom: 16px;
  background: repeating-linear-gradient(90deg, rgba(114, 229, 239, .015) 0 1px, transparent 1px 3px), linear-gradient(#0e1a20, #091216);
}
.xr-active .pp-group-title { width: auto; grid-template-columns: auto auto 1fr; }
.xr-active .pp-name { grid-column: auto; }
.xr-active .pp-group-title::after { content: "REAR · 110 IDC"; display: block; grid-column: auto; justify-self: end; color: #72e5ef; }
.xr-active .pp-stage .cables { display: none; }
/* The rear view is far taller than a real rack, so drop the RU stamps. */
.xr-active .pp .ru b { display: none; }

.xr-active .ports { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.xr-active .ports li:nth-child(7) { grid-column: auto; }
.xr-active .ports .port-blank { display: none; }
.xr-active .ports li {
  position: relative;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 10px 12px 12px;
  background: #0a161c; border: 1px solid #1d3742; border-radius: 3px;
  transition: opacity .2s ease;
}
/* The circuit ID sits on a wrap-around cable label. */
.xr-active .ports li::before {
  content: attr(data-circuit); align-self: flex-start; margin-bottom: 8px; padding: 3px 6px;
  background: #E9E6DC; color: #15181C; border-radius: 1px; font: 600 10px/1 var(--mono); letter-spacing: .06em;
}

.xr-active .ports .port { position: static; flex: none; flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; }
.xr-active .ports .port-uses { display: none; }
/* A 110 punch-down: eight conductors in T568B order. */
.xr-active .ports .jack {
  width: 38px; height: 14px; border-radius: 2px;
  background:
    linear-gradient(90deg,
      #EDE7DA 0 3px, transparent 3px 5px, #F28C28 5px 8px, transparent 8px 10px,
      #EDE7DA 10px 13px, transparent 13px 15px, #3B82F6 15px 18px, transparent 18px 20px,
      #EDE7DA 20px 23px, transparent 23px 25px, #22C55E 25px 28px, transparent 28px 30px,
      #EDE7DA 30px 33px, transparent 33px 35px, #8B5A2B 35px 38px) 0 0 / 100% 100% no-repeat,
    #1a2328;
  box-shadow: 0 0 0 1px #050607, 0 0 0 3px #22313a;
}
.xr-active .ports .jack::before, .xr-active .ports .jack::after { display: none; }
.xr-active .ports .port-label {
  width: auto; min-height: 0; padding: 0; justify-content: flex-start;
  background: none; color: #e6f7fb; box-shadow: none; text-align: left;
  font: 700 16px/1.15 "Rajdhani", var(--sans); letter-spacing: .04em; text-transform: uppercase;
}
.xr-active .ports .port:hover .port-label, .xr-active .ports .port.on .port-label,
.xr-active .ports .port.lit .port-label { background: none; box-shadow: none; color: #fff; }
.xr-active .ports .port.lit .jack { box-shadow: 0 0 0 1px #050607, 0 0 0 3px var(--lc), 0 0 12px var(--lc); }
.xr-active .ports .port.lit::after { /* outline the whole termination in the station colour */
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--lc); border-radius: 3px; pointer-events: none;
}
.xr-active .pp-stage.active .port { opacity: 1; }
.xr-active .pp-stage.active .ports li:has(.port):not(:has(.port.lit, .port.on)) { opacity: .35; }

.xr-circuit { margin-top: 10px; }
.xr-circuit p { margin: 0; font: 400 13.5px/1.5 var(--sans); }
.xr-circuit p + p { margin-top: 8px; }
.xr-circuit-what { color: #a9bec8; }
.xr-circuit-proof { color: #e6f7fb; }
.xr-circuit-key { display: block; margin-bottom: 2px; font: 600 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #72e5ef; }
.xr-circuit-where { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.xr-circuit-where .xr-circuit-key { display: inline; margin: 0 2px 0 0; }
.xr-circuit-where a {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c) 50%, #2A3038); color: #e2e7ec; text-decoration: none;
  font: 500 12px/1.5 var(--mono);
}
.xr-circuit-where a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.xr-circuit-where a:hover { background: color-mix(in srgb, var(--c) 16%, transparent); }
.xr-circuit-where a:focus-visible, .xr-circuit-more:focus-visible { outline: 2px solid #72e5ef; outline-offset: 2px; }
.xr-circuit-more {
  margin-top: 8px; padding: 4px 0; min-height: 32px; background: none; border: 0; cursor: pointer;
  color: #72e5ef; font: 500 12px/1.4 var(--mono); text-decoration: underline dotted; text-underline-offset: 4px;
}
.xr-circuit-more:hover { color: #a0f5fb; }

/* A four-panel overview, followed by details only when requested. */
.xr-active .pp .rack { --rail: 22px; }
.xr-active .pp .rack-rail { overflow: hidden; }
.xr-active .pp .ru-brush, .xr-active .pp .ru-manager, .xr-active .pp .ru-empty { display: none; }
.xr-active .pp .pp-group { min-height: 84px; gap: 12px; padding-block: 12px; }
.xr-active .pp .pp-group-title { display: block; width: 100%; scroll-margin-top: 96px; }
.xr-active .pp .pp-group-title > span, .xr-active .pp .pp-group-title::before, .xr-active .pp .pp-group-title::after { display: none; }
.xr-active .pp .xr-panel-toggle { display: grid !important; grid-template-columns: auto minmax(0, 1fr) 22px; align-items: center; gap: 5px 12px; width: 100%; min-height: 56px; padding: 4px 0; border: 0; background: transparent; color: #e6f7fb; text-align: left; }
.xr-panel-id { grid-column: 1; grid-row: 1 / span 2; padding: 6px; border: 1px solid #52646d; border-radius: 3px; color: #a9c3d0; font: 500 11px/1 var(--mono); letter-spacing: .02em; }
.xr-panel-name { grid-column: 2; color: #e6f7fb; font: 600 20px/1.1 "Rajdhani", var(--sans); letter-spacing: .03em; }
.xr-panel-count { grid-column: 2; color: #94b5c3; font: 400 11px/1.4 var(--mono); letter-spacing: 0; text-transform: none; }
.xr-panel-arrow { grid-column: 3; grid-row: 1 / span 2; color: #72e5ef; font: 400 25px/1 var(--sans); }
.xr-panel-toggle:hover .xr-panel-name { color: #a6f5fb; }
.xr-panel-toggle:focus-visible, .xr-rack-collapse:focus-visible { outline: 2px solid #72e5ef; outline-offset: 4px; }
.xr-active .pp .pp-group[data-xr-expanded=false] { gap: 0; }
.xr-active .pp .pp-group[data-xr-expanded=false] > .ports { display: none; }
.xr-active .pp .ports { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.xr-active .pp .ports li:not(.port-blank) { padding: 0; }
.xr-active .pp .ports li::before { position: absolute; top: 11px; left: 74px; margin: 0; padding: 0; background: none; color: #93aebc; font-size: 11px; pointer-events: none; }
.xr-active .pp .ports .port { display: grid; grid-template-columns: 46px minmax(0, 1fr) 18px; align-items: center; gap: 12px; min-height: 84px; padding: 12px; }
.xr-active .pp .ports .jack { width: 46px; height: 20px; }
.xr-active .pp .ports .port-label { padding-top: 14px; font: 600 17px/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.xr-active .pp .ports .xr-port-indicator { color: #72e5ef; font: 400 22px/1 var(--sans); }
.xr-active .pp .ports .xr-circuit { display: none !important; margin: 0; padding: 0 14px 16px; }
.xr-active .pp .ports li.xr-port-open { grid-column: 1 / -1; }
.xr-active .pp .ports li.xr-port-open .xr-circuit { display: block !important; }
.xr-active .pp .ports .xr-circuit-more { min-height: 44px; }
.xr-active .pp .chip { min-height: 44px; }
.xr-active .pp .xr-rack-tools { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin: -10px 0 14px; }
.xr-rack-tools p { color: #93b2c0; font: 400 12px/1.5 var(--mono); }
.xr-rack-collapse { min-height: 44px; padding: 8px 0 8px 12px; border: 0; background: none; color: #9ce9ed; font: 500 12px/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; }
.xr-patch-lesson { margin-top: 18px; border: 1px solid #355560; border-radius: 10px; background: #0c222b; }
.xr-patch-lesson > summary { position: relative; display: grid; gap: 6px; min-height: 78px; padding: 16px 48px 16px 20px; cursor: pointer; list-style: none; }
.xr-patch-lesson > summary::-webkit-details-marker { display: none; }
.xr-patch-lesson > summary::after { content: '+'; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); color: #72e5ef; font: 400 24px/1 var(--sans); }
.xr-patch-lesson[open] > summary::after { content: '−'; }
.xr-patch-lesson-name { color: #e6f7fb; font: 500 21px/1.25 var(--display); }
.xr-active .pp .xr-patch-lesson > .xr-lesson { margin-top: 0; border: 0; border-top: 1px solid #355560; border-radius: 0 0 10px 10px; }
@media (max-width: 760px) {
  .xr-active .pp .ru-unit { padding-inline: calc(var(--rail) * .52 + 8px); }
  .xr-active .pp .pp-group { min-height: 84px; }
}