/* Pythia Technologies - "one point, every protocol" animation (Integration page).
   Markup lives in integration/index.html (section id="publish"); behaviour in pmap.js. */
.pmap { position: relative; margin-top: 34px; display: grid; grid-template-columns: minmax(220px, 270px) 60px 150px 64px minmax(0, 1fr); align-items: center; gap: 0; }
.pm-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.pm-wires path { fill: none; stroke: rgba(160, 190, 230, 0.32); stroke-width: 1.6; stroke-dasharray: 4 5; }
.pm-wires circle { fill: var(--green); filter: drop-shadow(0 0 6px rgba(139, 209, 78, 0.9)); }
.pm-wires circle.alarm { fill: #F2A33A; filter: drop-shadow(0 0 6px rgba(242, 163, 58, 0.95)); }
.pm-src, .pm-dm, .pm-out { position: relative; z-index: 1; background: rgba(8, 14, 30, 0.62); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3); }
.pm-src { grid-column: 1; padding: 16px 18px; }
.pm-dm { grid-column: 3; padding: 18px 12px; text-align: center; border-color: var(--green); }
.pm-outs { grid-column: 5; display: grid; gap: 14px; position: relative; z-index: 1; }
.pm-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; color: #9DB0CC; }
.pm-state { font-size: 12px; letter-spacing: 0.5px; padding: 3px 10px; border-radius: 99px; background: rgba(139, 209, 78, 0.16); color: var(--green); transition: background .3s, color .3s; }
.pm-state.alarm { background: rgba(242, 163, 58, 0.18); color: #F7B65A; }
.pm-unit { font-family: var(--head); font-weight: 800; font-size: 22px; color: #fff; margin-top: 10px; }
.pm-loc { font-size: 13px; color: #9DB0CC; }
.pm-src dl { margin: 12px 0 0; display: grid; gap: 6px; }
.pm-src dl div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 7px; font-size: 14.5px; transition: background .8s; }
.pm-src dt { color: #C9D6E8; } .pm-src dd { margin: 0; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.pm-dmname { font-family: var(--head); font-weight: 800; font-size: 18px; color: #fff; }
.pm-dmsub { font-size: 12.5px; color: #9DB0CC; margin-top: 4px; line-height: 1.3; }
.pm-led { width: 10px; height: 10px; border-radius: 50%; background: var(--green); margin: 10px auto 0; box-shadow: 0 0 10px var(--green); }
.pmap.busy .pm-led { animation: pmblink .5s ease-in-out 2; }
@keyframes pmblink { 50% { opacity: .25; } }
.pm-out { padding: 12px 14px 8px; }
.pm-out .pm-h b { color: #fff; font-size: 13px; letter-spacing: 0.5px; text-transform: none; }
.pm-out .pm-h span { text-transform: none; letter-spacing: 0; font-weight: 600; }
.pm-out table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; table-layout: fixed; }
.pm-out th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #7F93B2; font-weight: 700; padding: 3px 6px; }
.pm-out td { padding: 4px 6px; color: #D3DEEC; border-top: 1px solid rgba(255, 255, 255, 0.07); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background .8s, color .3s; }
.pm-out td:first-child { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; font-size: 12.5px; color: #A9C4E8; width: 31%; }
.pm-out td:last-child, .pm-out th:last-child { text-align: right; width: 17%; }
.pm-out td:last-child { font-family: Consolas, "Cascadia Mono", ui-monospace, monospace; color: #fff; font-weight: 700; }
.pm-out tr.alarm td:last-child { color: #F7B65A; }
.pmap .flash, .pmap .flash td { background: rgba(139, 209, 78, 0.22); transition: none; }
.pmap .flash.alarm, .pmap .flash.alarm td { background: rgba(242, 163, 58, 0.25); }
.pm-note { font-size: 13.5px; color: #9DB0CC; margin: 16px 0 0; }
@media (max-width: 1000px) {
  .pmap { grid-template-columns: 1fr; gap: 14px; }
  .pm-wires { display: none; }
  .pm-src, .pm-dm, .pm-outs { grid-column: 1; }
  .pm-dm { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 12px; }
  .pm-dm .pm-led { margin: 0; }
}
@media (max-width: 560px) {
  .pm-out td:first-child { width: 34%; } .pm-out td:last-child, .pm-out th:last-child { width: 20%; }
  .pm-out table { font-size: 12.5px; } .pm-out td:first-child { font-size: 11.5px; }
  .pm-out td:nth-child(2) { white-space: normal; line-height: 1.25; }
}

/* DM Mappings screenshot gallery (Integration page, figure id="mapping-screens"). Without JavaScript every panel shows. */
.mgal .mg-tabs { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mgal.js .mg-tabs { display: flex; }
.mgal .mg-tabs button { font: 700 14px var(--head); padding: 8px 14px; border-radius: 99px; border: 1px solid var(--line); background: #fff; color: var(--navy); cursor: pointer; }
.mgal .mg-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.mgal .mg-tabs button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mgal .mg-panel { display: grid; gap: 10px; margin-bottom: 18px; }
.mgal.js .mg-panel { display: none; margin-bottom: 0; }
.mgal.js .mg-panel.on { display: grid; }
.mgal .mg-panel a { display: block; line-height: 0; }
.mgal .mg-panel img { height: auto; }
.pg-split > .mgal { align-self: start; }