/* Kelly Page -- LoRa Mesh > Packet Journey tab shell (js/pj-ui.js, 2026-10-24). Layout only: each part has its own
 * css/pj-*.css. Steady glows; anything that moves is drawn by JS and stops (kelly-page/CLAUDE.md). */
.pj { display: grid; gap: 14px; --pj-advert: #00e5ff; --pj-chat: #39ff88; --pj-dm: #b06bff; --pj-ack: #ffffff; --pj-path: #ffb020; --pj-req: #3ba8ff; --pj-unknown: #ff3b5c; }
.pj-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pj-title h2 { margin: 0; }
.pj-mode { font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 999px; background: var(--raised); color: var(--dim); border: 1px solid var(--line2); }
.pj-mode.live { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 10px rgba(57, 255, 136, .35); }
.pj-mode.demo { color: var(--amber); border-color: var(--amber); box-shadow: 0 0 10px rgba(255, 176, 32, .35); }
.pj-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pj-bar .grow { flex: 1; }
.pj-sound { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 13px; color: var(--dim); }
.pj-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

.pj-main { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: 14px; align-items: stretch; }
.pj-stage { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.pj-net { position: relative; flex: 1; min-height: 460px; height: 58vh; background: radial-gradient(ellipse at 45% 35%, #0b1630, #050912 75%); }
.pj-ticker { border-top: 1px solid var(--line); min-height: 34px; }
.pj-side { min-width: 0; max-height: calc(58vh + 34px); overflow: auto; }
.pj-stats { min-width: 0; }
/* the second stats row (pj-time / pj-reach / pj-map / pj-air): two columns, the map across both */
.pj-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pj-more > .pj-part { min-width: 0; } .pj-more > .pj-part:empty { display: none; } .pj-more > .pj-wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .pj-more { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .pj-main { grid-template-columns: 1fr; } .pj-side { max-height: none; } }
@media (max-width: 600px) { .pj-net { min-height: 320px; height: 52vh; } .pj-bar .btn { padding-inline: 10px; } }

/* full screen (Fullscreen API on .pj, or .pj-fs where the browser won't): the canvas takes the room */
.pj:fullscreen, .pj.pj-fs { background: var(--bg); padding: 14px 18px; overflow: auto; grid-template-rows: auto 1fr auto; }
.pj.pj-fs { position: fixed; inset: 0; z-index: 2000; }
.pj:fullscreen .pj-head > p, .pj.pj-fs .pj-head > p { display: none; }
.pj:fullscreen .pj-net, .pj.pj-fs .pj-net { height: auto; min-height: 60vh; }
.pj:fullscreen .pj-side, .pj.pj-fs .pj-side { max-height: none; }
/* read across a room: the HTML parts a size up (the canvas scales its own text with its width) */
.pj:fullscreen .pj-head, .pj.pj-fs .pj-head, .pj:fullscreen .pj-side, .pj.pj-fs .pj-side, .pj:fullscreen .pj-stats, .pj.pj-fs .pj-stats, .pj:fullscreen .pj-ticker, .pj.pj-fs .pj-ticker { zoom: 1.25; }
@media (max-width: 900px) { .pj:fullscreen .pj-head, .pj.pj-fs .pj-head, .pj:fullscreen .pj-side, .pj.pj-fs .pj-side, .pj:fullscreen .pj-stats, .pj.pj-fs .pj-stats, .pj:fullscreen .pj-ticker, .pj.pj-fs .pj-ticker { zoom: 1; } }
/* the airtime + hash size cards side by side across the full width (they're short and wide); scrollbars on the dark theme */
.pj-more > #pj-air { grid-column: 1 / -1; }
@media (min-width: 1100px) { #pj-air .pj-air { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.pj, .pj * { scrollbar-color: var(--line2) transparent; scrollbar-width: thin; }