/* Platform diagram (Brief 13). Shared by platform-diagram.html, platform.html (full) and index.html (compact). */
/* Installer and end customer spaces stay light in both page themes (existing colours: distributor dark, installer light, end customer light). */
.pd-light {
  --c-card: 255 255 255; --c-alt: 239 238 232; --c-raised: 231 229 222; --c-line: 217 214 204;
  --c-ink: 19 18 9; --c-mute: 92 91 85; --c-acc: 78 107 0; --c-data: 27 98 190; --c-ok: 22 108 52; --c-warn: 154 91 0;
  color: rgb(var(--c-ink));
}
/* On the dark page theme the distributor drops to black so it still reads as its own space */
html[data-theme="dark"] .pd-dist { background: #000000; }
.pd-space { transition: opacity .5s var(--e), transform .5s var(--e); }

/* See-through divider between distributor and installer: dashed on both sides, translucent, never solid */
.pd-glass { border: 2px dashed rgb(var(--c-mute) / .55); background: rgb(var(--c-card) / .35); }
.pd-flow { position: relative; overflow: hidden; }
.pd-chip { transition: opacity .5s var(--e), transform .5s var(--e); }
@media (prefers-reduced-motion: no-preference) {
  .in .pd-flow .pd-move-r { animation: pdR 2.8s var(--e) 3 both; }
  .in .pd-flow .pd-move-l { animation: pdL 2.8s var(--e) 3 both; animation-delay: 1.4s; }
  [data-focus="link"] .pd-flow .pd-move-r { animation: pdR 2.8s var(--e) 2 both; }
  [data-focus="link"] .pd-flow .pd-move-l { animation: pdL 2.8s var(--e) 2 both; animation-delay: 1.4s; }
}
@keyframes pdR { 0% { transform: translateX(-24px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
@keyframes pdL { 0% { transform: translateX(24px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
@media (max-width: 767px) {
  @keyframes pdR { 0% { transform: translateY(-16px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
  @keyframes pdL { 0% { transform: translateY(16px); opacity: 0; } 40%, 100% { transform: none; opacity: 1; } }
}
.force .pd-flow * { animation: none !important; }

/* Solid wall between distributor and end customer */
.pd-wallbar { background: rgb(var(--c-ink)); }
.pd-bracket { position: relative; }
.pd-bracket > span { position: absolute; background: rgb(var(--c-ink) / .7); }

/* Relationship key highlights the part of the diagram it describes */
.pd-key button { transition: background-color .3s var(--e), border-color .3s var(--e), transform .5s var(--e); }
.pd-key button:hover { background: rgb(var(--c-raised)); }
.pd-key button:active { transform: scale(.98); }
.pd-key button[aria-pressed="true"] { border-color: rgb(var(--c-acc)); background: rgb(var(--c-raised)); }
.pd-key button:focus-visible { outline: 2px solid rgb(var(--c-acc)); outline-offset: 2px; }
[data-focus] [data-part] { transition: opacity .5s var(--e), transform .5s var(--e), box-shadow .5s var(--e); }
[data-focus="link"] [data-part]:not([data-part~="link"]),
[data-focus="open"] [data-part]:not([data-part~="open"]),
[data-focus="wall"] [data-part]:not([data-part~="wall"]) { opacity: .35; }
[data-focus] [data-part~="hl"] { transition: box-shadow .5s var(--e); }
[data-focus="link"] [data-part~="link"][data-part~="hl"],
[data-focus="open"] [data-part~="open"][data-part~="hl"],
[data-focus="wall"] [data-part~="wall"][data-part~="hl"] { box-shadow: 0 0 0 2px rgb(var(--c-acc)); }