/* Produra's illustrated inspection scene. No application state is represented. */
#inspection-scene {
  --ps-ink: #FAFAF7;
  --ps-paper: #17181C;
  --ps-iris: #3455DB;
  --ps-cyan: #176A50;
  --ps-coral: #8C5700;
  position: relative;
  width: 100%;
  max-width: 940px;
  aspect-ratio: 850 / 760;
  isolation: isolate;
  contain: layout style;
  pointer-events: none;
}

#inspection-scene::before { display: none; }

#inspection-scene .ps-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

#inspection-scene text {
  font-family: Manrope, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--ps-paper);
  font-weight: 450;
  text-rendering: optimizeLegibility;
}

#inspection-scene .ps-mono {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 400;
}

#inspection-scene .ps-eyebrow {
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 2px;
  fill: #62636C;
}

#inspection-scene .ps-caption { font-size: 12px; fill: #62636C; }
#inspection-scene .ps-subtle { fill: #62636C; }
#inspection-scene .ps-white { fill: var(--ps-paper); }
#inspection-scene .ps-iris { fill: var(--ps-iris); }
#inspection-scene .ps-label-warning { fill: var(--ps-coral); }
#inspection-scene .ps-label-iris { fill: var(--ps-iris); }
#inspection-scene .ps-label-owner { fill: var(--ps-cyan); }
#inspection-scene .ps-code { font-size: 17px; }
#inspection-scene .ps-row-text { font-size: 15px; }
#inspection-scene .ps-small { font-size: 12px; }
#inspection-scene .ps-tiny { font-size: 10px; }

#inspection-scene .ps-plate {
  transform-origin: 50% 50%;
  transition: transform 480ms cubic-bezier(.2,.75,.2,1);
}

#inspection-scene .ps-top { transform: translateY(0); }
#inspection-scene .ps-middle { transform: translateY(0); }
#inspection-scene .ps-bottom { transform: translateY(0); }
#inspection-scene[data-stage="patch"] .ps-top,
#inspection-scene[data-stage="verify"] .ps-top { transform: translateY(-6px); }
#inspection-scene[data-stage="patch"] .ps-bottom,
#inspection-scene[data-stage="verify"] .ps-bottom { transform: translateY(7px); }

#inspection-scene .ps-stage {
  opacity: 0;
  transition: opacity 320ms ease;
}

#inspection-scene[data-stage="finding"] .ps-finding,
#inspection-scene[data-stage="patch"] .ps-patch,
#inspection-scene[data-stage="verify"] .ps-verify { opacity: 1; }

#inspection-scene .ps-filter {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 320ms ease, transform 480ms cubic-bezier(.2,.75,.2,1);
}

#inspection-scene[data-stage="patch"] .ps-filter,
#inspection-scene[data-stage="verify"] .ps-filter {
  opacity: 1;
  transform: translateY(0);
}

#inspection-scene .ps-boundary {
  opacity: .2;
  transition: opacity 320ms ease;
}

#inspection-scene[data-stage="patch"] .ps-boundary,
#inspection-scene[data-stage="verify"] .ps-boundary { opacity: 1; }

#inspection-scene .ps-owner-row {
  fill: #EDF6F1;
  stroke: #176A50;
  transition: fill 360ms ease, stroke 360ms ease;
}

#inspection-scene[data-stage="verify"] .ps-owner-row { fill: #E4F1E9; stroke: var(--ps-cyan); }
#inspection-scene .ps-other-row { fill: #FBF3E5; stroke: #8C5700; transition: fill 360ms ease, stroke 360ms ease; }
#inspection-scene[data-stage="finding"] .ps-other-row { fill: #FBF3E5; stroke: #8C5700; }

#inspection-scene .ps-trace {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

#inspection-scene .ps-trace-soft { opacity: .35; }
#inspection-scene .ps-trace-strong { stroke-width: 2; }
#inspection-scene .ps-guide { stroke: #7D808A; stroke-width: .7; fill: none; opacity: .24; }
#inspection-scene .ps-packet { transform: translate(482px, 241px); }
#inspection-scene .ps-packet-own { transform: translate(441px, 462px); }
#inspection-scene .ps-endpoint { transform-box: fill-box; transform-origin: center; }

/* Paper layers and precise linework replace the dark metal/neon materials. */
#inspection-scene .ps-art [filter] { filter: none; }
#inspection-scene [fill="url(#ps-floor)"] { display: none; }
#inspection-scene #ps-surface stop { stop-color: #FFFFFF; }
#inspection-scene #ps-route-surface stop { stop-color: #EDF1FF; }
#inspection-scene #ps-data-surface stop { stop-color: #FFFFFF; }
#inspection-scene #ps-edge stop { stop-color: #7D808A; stop-opacity: 1; }
#inspection-scene #ps-rim stop { stop-color: #DEDFE3; }
#inspection-scene #ps-filter-fill stop { stop-color: #DDE6FE; }
#inspection-scene #ps-gate stop { stop-color: var(--ps-iris); }
#inspection-scene .ps-plate rect[fill^="#"] { fill: #F5F6F8; fill-opacity: 1; }
#inspection-scene .ps-plate > g > rect:first-child { fill: #F2F2EE; stroke: #7D808A; }
#inspection-scene .ps-plate [stroke] { stroke: #7D808A; }
#inspection-scene .ps-top [fill="#657fa1"],
#inspection-scene .ps-top [fill="#455f83"],
#inspection-scene .ps-top [fill="#7d93b0"] { fill: #EDF1FF; }
#inspection-scene .ps-top [fill="#80e5ec"] { fill: var(--ps-iris); }
#inspection-scene .ps-middle tspan { fill: var(--ps-paper); }
#inspection-scene .ps-middle tspan[fill="#80e5ec"],
#inspection-scene .ps-middle tspan[fill="#c0d3fa"],
#inspection-scene .ps-middle tspan[fill="#d6e9ff"] { fill: #2B4CC7; }
#inspection-scene .ps-middle tspan[fill="#d9c7b9"] { fill: #8C5700; }
#inspection-scene .ps-middle .ps-label-warning { fill: var(--ps-coral); }
#inspection-scene .ps-plate .ps-owner-row { fill: #EDF6F1; stroke: var(--ps-cyan); }
#inspection-scene .ps-plate .ps-other-row { fill: #FBF3E5; stroke: var(--ps-coral); }
#inspection-scene .ps-filter rect { stroke: var(--ps-iris); }
#inspection-scene .ps-boundary [stroke] { stroke: var(--ps-iris); }
#inspection-scene .ps-boundary circle { fill: var(--ps-iris); }
#inspection-scene .ps-finding .ps-trace,
#inspection-scene .ps-finding .ps-endpoint,
#inspection-scene .ps-finding .ps-outside-label path { stroke: var(--ps-coral); }
#inspection-scene .ps-finding > circle[fill],
#inspection-scene .ps-finding .ps-packet circle:first-child { fill: var(--ps-coral); }
#inspection-scene .ps-patch .ps-trace,
#inspection-scene .ps-verify .ps-trace { stroke: var(--ps-iris); }
#inspection-scene .ps-patch .ps-packet circle:first-child,
#inspection-scene .ps-verify .ps-packet circle:first-child { fill: var(--ps-iris); }
#inspection-scene .ps-verify .ps-trace[stroke="#92e6bc"],
#inspection-scene .ps-verify [stroke="#d5f2e2"],
#inspection-scene .ps-verify [stroke="#90bba2"] { stroke: var(--ps-cyan); }
#inspection-scene .ps-verify .ps-packet-own circle:first-child { fill: var(--ps-cyan); }

/* Motion is opt-in after visibility and user preferences have been checked. */
#inspection-scene[data-animated="true"] .ps-finding .ps-packet {
  animation: ps-request-cross 6.4s cubic-bezier(.35,0,.2,1) infinite;
}

#inspection-scene[data-animated="true"] .ps-patch .ps-packet,
#inspection-scene[data-animated="true"] .ps-verify .ps-packet {
  animation: ps-request-stop 6.4s cubic-bezier(.35,0,.2,1) infinite;
}

#inspection-scene[data-animated="true"] .ps-verify .ps-packet-own {
  animation: ps-request-owned 6.4s cubic-bezier(.35,0,.2,1) infinite;
}

#inspection-scene[data-animated="true"] .ps-finding .ps-endpoint {
  animation: ps-arrival 6.4s ease infinite;
}

#inspection-scene[data-animated="true"] .ps-boundary-light {
  animation: ps-boundary-breathe 6.4s ease-in-out infinite;
}

#inspection-scene[data-paused="true"] .ps-art *,
#inspection-scene[data-motion="still"] .ps-art * { animation-play-state: paused !important; }

@keyframes ps-request-cross {
  0%, 12% { transform: translate(482px, 241px); opacity: 0; }
  18% { opacity: 1; }
  36% { transform: translate(467px, 342px); }
  58% { transform: translate(549px, 446px); }
  79%, 88% { transform: translate(573px, 585px); opacity: 1; }
  100% { transform: translate(573px, 585px); opacity: 0; }
}

@keyframes ps-request-stop {
  0%, 12% { transform: translate(482px, 241px); opacity: 0; }
  18% { opacity: 1; }
  36% { transform: translate(467px, 342px); }
  58%, 67% { transform: translate(549px, 446px); opacity: 1; }
  81%, 100% { transform: translate(536px, 419px); opacity: 0; }
}

@keyframes ps-request-owned {
  0%, 47% { transform: translate(441px, 462px); opacity: 0; }
  53% { opacity: 1; }
  82%, 91% { transform: translate(461px, 543px); opacity: 1; }
  100% { transform: translate(461px, 543px); opacity: 0; }
}

@keyframes ps-arrival {
  0%, 68%, 100% { opacity: .3; transform: scale(1); }
  80% { opacity: .95; transform: scale(1.4); }
  92% { opacity: .15; transform: scale(1.8); }
}

@keyframes ps-boundary-breathe {
  0%, 28%, 100% { opacity: .5; }
  55%, 70% { opacity: .85; }
}

@media (max-width: 640px) {
  #inspection-scene { max-width: 620px; }
  #inspection-scene .ps-outside-label { display: none; }
  #inspection-scene::before { inset: 8% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #inspection-scene *, #inspection-scene *::before, #inspection-scene *::after {
    animation: none !important;
    transition: none !important;
  }
}

#inspection-scene[data-stage="verify"] .ps-owner-row { fill:#E4F1E9; stroke:var(--ps-cyan); }