/* Kelly Page -- LoRa Mesh > Property Guard tab (js/pg-ui.js, 2026-10-25). A night-time site map with LoRa packets
 * hopping on it, IO tiles per RAK13002 channel. Animations run once or 3 times and move transform / opacity only
 * (kelly-page/CLAUDE.md); the alarm state stays a steady red, it doesn't keep flashing. */
.pg { display: grid; gap: 14px;
  --pg-ok: #39ff88; --pg-bad: #ff3b5c; --pg-warn: #ffb020; --pg-watch: #00e5ff; --pg-p25: #ff2bd6; --pg-hb: #8394b8; }
.pg-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pg-title h3 { margin: 0; }
.pg-title .grow { flex: 1; }
.pg-lede { margin: 10px 0 0; color: var(--dim); max-width: 110ch; font-size: 14px; }
.pg-lede b { color: var(--text); }
.pg-narr { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(0, 229, 255, .35); background: rgba(0, 229, 255, .07);
  font: 600 14px var(--ui); color: var(--text); }

.pg-state { display: inline-flex; flex-direction: column; padding: 4px 12px; border-radius: 10px; border: 1px solid var(--line2); background: var(--raised); line-height: 1.15; }
.pg-state b { font: 700 13px var(--display); letter-spacing: .12em; }
.pg-state small { font: 600 11px var(--mono); color: var(--dim); min-height: 13px; }
.pg-state.disarmed b { color: var(--dim); }
.pg-state.armed { border-color: var(--pg-ok); box-shadow: 0 0 12px rgba(57, 255, 136, .3); } .pg-state.armed b { color: var(--pg-ok); }
.pg-state.entry { border-color: var(--pg-warn); box-shadow: 0 0 14px rgba(255, 176, 32, .4); } .pg-state.entry b { color: var(--pg-warn); }
.pg-state.alarm { border-color: var(--pg-bad); background: rgba(255, 59, 92, .18); box-shadow: 0 0 22px rgba(255, 59, 92, .55); } .pg-state.alarm b { color: #ffd0d8; }
.pg-state.alarm.acked { box-shadow: none; }

.pg-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 14px; align-items: start; }
.pg-col { display: grid; gap: 14px; min-width: 0; }
@media (max-width: 1100px) { .pg-grid { grid-template-columns: 1fr; } }

/* ---- site map */
.pg-map { display: block; width: 100%; height: auto; margin-top: 10px; }
.pg-ground { fill: #07140f; stroke: var(--line); }
.pg-hill { fill: #0e2418; stroke: #1d4a30; }
.pg-road { fill: #1a1f2b; }
.pg-drive { fill: none; stroke: #3a3424; stroke-width: 18; stroke-linecap: round; }
.pg-paddock { fill: rgba(57, 255, 136, .03); stroke: #1d4a30; stroke-dasharray: 4 6; }
.pg-shed { fill: #1b2338; stroke: #4b5d8c; stroke-width: 2; }
.pg-tank { fill: #0f2236; stroke: #2f6a9a; stroke-width: 2; }
.pg-fence { fill: #6b5a3a; }
.pg-lbl { fill: var(--dim); font: 600 12px var(--mono); }
.pg-lbl.hi { fill: var(--pg-ok); }
.pg-emoji { font-family: 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif; }
.pg-fig { opacity: 0; pointer-events: none; }
.pg-seis { fill: none; stroke: #6b5a3a; stroke-width: 2; stroke-dasharray: 2 7; }
.pg-cone { fill: rgba(0, 229, 255, .06); stroke: rgba(0, 229, 255, .25); }
.pg-cone.small { fill: rgba(167, 139, 250, .07); stroke: rgba(167, 139, 250, .3); }
.pg-dot { fill: var(--pg-watch); }
.pg-door, .pg-win { fill: #8a6d3b; }
.pg-beam { stroke: rgba(255, 59, 92, .35); stroke-width: 2; stroke-dasharray: 3 4; }
.pg-post { fill: #c9d3ea; }
.pg-sens.on .pg-cone { fill: rgba(255, 59, 92, .22); stroke: var(--pg-bad); }
.pg-sens.on .pg-door, .pg-sens.on .pg-win, .pg-sens.on .pg-dot { fill: var(--pg-bad); }
.pg-sens.on .pg-beam { stroke: var(--pg-bad); stroke-width: 4; stroke-dasharray: none; }
.pg-sens.on .pg-seis { stroke: var(--pg-warn); stroke-width: 3; }
.pg-link { stroke: rgba(57, 255, 136, .25); stroke-width: 2; stroke-dasharray: 6 6; transition: stroke .3s; }
.pg-link.p25 { stroke: rgba(255, 43, 214, .3); }
.pg-link.lit { stroke: rgba(0, 229, 255, .8); }
.pg-node-ic circle { fill: #0b1020; stroke: var(--cyan); stroke-width: 2; }
.pg-node-ic text { fill: var(--cyan); font: 700 13px var(--display); }
.pg-node-ic.rpt circle { stroke: var(--pg-ok); }
.pg-node-ic.dead circle { stroke: var(--pg-bad); stroke-dasharray: 3 3; } .pg-node-ic.dead text { fill: var(--pg-bad); }
.pg-off rect { fill: #0b1020; stroke: var(--line2); }
.pg-off text { fill: var(--text); font: 700 13px var(--ui); } .pg-off text.sm { fill: var(--dim); font: 600 10px var(--mono); }
.pg-off.p25 rect { stroke: rgba(255, 43, 214, .5); }
.pg-pkt { fill: var(--cyan); filter: drop-shadow(0 0 6px var(--cyan)); }
.pg-pkt.hb { fill: var(--pg-hb); filter: none; }
.pg-pkt.p25 { fill: var(--pg-p25); filter: drop-shadow(0 0 6px var(--pg-p25)); }
.pg-pkt.down { fill: var(--pg-ok); filter: drop-shadow(0 0 6px var(--pg-ok)); }

/* ---- threat */
.pg-threat .card-h b { font: 700 14px var(--mono); }
.pg-meter { height: 14px; margin: 10px 0; border-radius: 7px; background: var(--raised); border: 1px solid var(--line2); overflow: hidden; }
.pg-meter i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); transition: transform .45s, background .3s; background: var(--pg-ok); }
.pg-meter i.pg-watch { background: var(--pg-watch); } .pg-meter i.pg-warn { background: var(--pg-warn); } .pg-meter i.pg-bad { background: var(--pg-bad); }
b.pg-ok { color: var(--pg-ok); } b.pg-watch { color: var(--pg-watch); } b.pg-warn { color: var(--pg-warn); } b.pg-bad { color: var(--pg-bad); }
.pg-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 26px; }
.pg-chain i { color: var(--mute); font-style: normal; }
.pg-chip { font: 600 12px var(--mono); padding: 2px 8px; border-radius: 999px; background: var(--raised); border: 1px solid var(--line2); }

/* ---- nodes */
.pg-node { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.pg-node:first-child { border-top: 0; }
.pg-node > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pg-node small { color: var(--dim); font-size: 12px; }
.pg-node-r { align-items: flex-end; text-align: right; }
.pg-node-r .btn { margin-top: 4px; }
.pg-budget { font: 600 11px var(--mono); color: var(--cyan); } .pg-budget b { color: var(--pg-warn); }
.pg-node.bad b { color: var(--pg-bad); }

/* ---- P25X messages */
.pg-msgs { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; margin-top: 8px; }
.pg-msg { border: 1px solid var(--line2); border-left: 4px solid var(--pg-p25); border-radius: 10px; padding: 8px 10px; background: rgba(255, 43, 214, .05); }
.pg-msg.alarm { border-left-color: var(--pg-bad); background: rgba(255, 59, 92, .1); }
.pg-msg.warn { border-left-color: var(--pg-warn); } .pg-msg.ok { border-left-color: var(--pg-ok); }
.pg-msg-h { display: flex; justify-content: space-between; gap: 8px; font: 600 11px var(--mono); color: var(--dim); }
.pg-msg p { margin: 4px 0 2px; font: 600 13px var(--mono); color: var(--text); word-break: break-word; }
.pg-msg small { font: 11px var(--mono); color: var(--mute); }

/* ---- IO tiles */
.pg-sub { margin: 12px 0 6px; font: 700 11px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pg-tile { display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; border: 1px solid var(--line2); background: var(--raised); transition: border-color .25s, box-shadow .25s; }
.pg-tile.on { border-color: var(--pg-bad); box-shadow: 0 0 14px rgba(255, 59, 92, .35); }
.pg-tile.dead { opacity: .45; }
.pg-th { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.pg-io { font: 700 11px var(--mono); padding: 2px 6px; border-radius: 6px; background: #0b1020; color: var(--cyan); border: 1px solid rgba(0, 229, 255, .35); }
.pg-val { font: 700 18px var(--mono); }
.pg-tile.on .pg-val { color: var(--pg-bad); }
.pg-when { font: 11px var(--mono); color: var(--mute); }
.pg-wire { margin: 2px 0; font-size: 12px; color: var(--dim); line-height: 1.3; flex: 1; }
.pg-act { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-spark { width: 100%; height: 30px; display: block; }
.pg-spark polyline { fill: none; stroke: var(--pg-warn); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pg-spark .th { stroke: var(--pg-bad); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.pg-bar { height: 8px; border-radius: 4px; background: #0b1020; border: 1px solid var(--line2); overflow: hidden; }
.pg-bar i { display: block; height: 100%; background: var(--pg-ok); transition: width .5s; }
.pg-bar.tank i { background: var(--cyan); }
.pg-bar.low i { background: var(--pg-bad); }

/* ---- event log */
.pg-log { list-style: none; margin: 8px 0 0; padding: 0; max-height: 300px; overflow-y: auto; font: 12px var(--mono); }
.pg-log li { display: grid; grid-template-columns: 70px 52px 1fr; gap: 8px; padding: 3px 4px; border-bottom: 1px solid var(--line); }
.pg-log time { color: var(--mute); }
.pg-log b { font-weight: 700; }
.pg-log .pg-ev b { color: var(--cyan); } .pg-log .pg-alarm { background: rgba(255, 59, 92, .1); } .pg-log .pg-alarm b { color: var(--pg-bad); }
.pg-log .pg-warn b { color: var(--pg-warn); } .pg-log .pg-p25 b { color: var(--pg-p25); } .pg-log .pg-mesh b { color: var(--pg-ok); }
.pg-log .pg-hb, .pg-log .pg-info { color: var(--dim); }

/* ---- how it works */
.pg-how summary { cursor: pointer; list-style: none; } .pg-how summary h2 { display: inline; margin: 0; font: 700 13px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.pg-how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 22px; margin-top: 12px; }
.pg-how h4 { margin: 0 0 4px; color: var(--text); font: 700 15px var(--ui); }
.pg-how p, .pg-tips { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.45; }
.pg-tips { padding-left: 18px; } .pg-tips li { margin-bottom: 4px; }
.pg-calc { margin-top: 16px; padding: 12px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(0, 229, 255, .03); }
.pg-calc label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--dim); font-size: 14px; }
.pg-calc input[type=range] { flex: 1; min-width: 160px; }
.pg-calc-rows { display: grid; gap: 8px; margin: 10px 0; }
.pg-calc-row { display: grid; grid-template-columns: 140px repeat(4, minmax(0, 1fr)); gap: 6px 10px; align-items: center; font: 12px var(--mono); }
.pg-calc-row .pg-bar { grid-column: 1 / -1; }
.pg-calc-row.evt b { color: var(--pg-ok); } .pg-calc-row.poll b { color: var(--pg-warn); } .pg-calc-row.poll .pg-bar i { background: var(--pg-warn); }
.pg-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg-tbl th, .pg-tbl td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); color: var(--dim); }
.pg-tbl th { color: var(--text); }

@media (max-width: 600px) {
  .pg-calc-row { grid-template-columns: 1fr 1fr; }
  .pg-log li { grid-template-columns: 62px 1fr; } .pg-log li span { grid-column: 1 / -1; }
  .pg-tiles { grid-template-columns: 1fr 1fr; }
}
.pg, .pg * { scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }

/* ---- P25 message triggers (Kelly at home) */
.pg-to { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; color: var(--dim); }
.pg-to input { flex: 1; min-width: 0; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--line2); background: #0b1020; color: var(--text); font: 13px var(--mono); }
.pg-trig-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; margin-top: 8px; font-size: 13px; }
.pg-trig-list label, .pg-armed-only { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.pg-trig-list.ch { font-size: 12px; }
.pg-armed-only { margin-top: 8px; font-size: 12px; color: var(--dim); }
.pg-trigs .pg-sub { margin-top: 10px; }