/* Kelly Page -- LoRa Mesh > Packet Journey: airtime + channel load, path hash size check (js/pj-air.js, 2026-10-24).
 * Two stacked cards in #pj-air. Nothing animates (kelly-page/CLAUDE.md "Rules that bite"). */
.pj-air { display: grid; gap: 14px; }
.pj-air > .card { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pj-air canvas { display: block; width: 100%; }
.pj-air-sub { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.pj-air-sub .dim { letter-spacing: 0; text-transform: none; font-weight: 600; }
.pj-air-note { margin: 0; font-size: 13px; color: var(--dim); line-height: 1.4; }
.pj-air-note b { color: var(--text); }

/* gauge + meaning */
.pj-air-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pj-air-gauge { position: relative; flex: 0 0 200px; width: 200px; }
.pj-air-gauge canvas { width: 200px; }
.pj-air-gv { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.pj-air-gv b { font: 800 30px / 1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px currentColor; color: var(--lime); }
.pj-air-gv small { font: 600 10px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
.pj-air-meta { flex: 1 1 220px; min-width: 0; display: grid; gap: 8px; }
.pj-air-mean { margin: 0; font-size: 16px; font-weight: 700; }
.pj-air-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; }
.pj-air-kv dt { font: 600 11px var(--mono); color: var(--dim); text-transform: uppercase; padding-top: 2px; }
.pj-air-kv dd { margin: 0; font-family: var(--mono); min-width: 0; overflow-wrap: anywhere; }
.pj-air-kv .tag { font-size: 10px; padding: 1px 6px; }

/* airtime by kind */
.pj-air-split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--raised); }
.pj-air-split i { display: block; height: 100%; }
.pj-air-kleg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 14px; font-size: 14px; }
.pj-air-kleg li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 2px 8px; }
.pj-air-kleg li > i { width: 10px; height: 10px; border-radius: 50%; }
.pj-air-kleg b { font: 700 13px var(--mono); }
.pj-air-kleg small { grid-column: 2 / -1; font: 600 11px var(--mono); color: var(--dim); }

/* tables */
.pj-air-tbl { overflow-x: auto; }
.pj-air-tbl table { width: 100%; border-collapse: collapse; }
.pj-air-tbl th { color: var(--dim); font: 600 11px var(--mono); text-transform: uppercase; letter-spacing: .06em; text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line2); white-space: nowrap; }
.pj-air-tbl td { padding: 5px 8px; border-top: 1px solid var(--line); white-space: nowrap; font: 600 13px var(--mono); }
.pj-air-tbl tr[data-id] { cursor: pointer; }
.pj-air-tbl tr[data-id]:hover td { background: rgba(0, 229, 255, .06); }
.pj-air-nm { font-family: var(--ui) !important; font-size: 15px !important; font-weight: 700; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.pj-air-n { color: var(--lime); font-weight: 800 !important; }
.pj-air-bad { color: var(--red); font-weight: 800 !important; }
.pj-air-ago { color: var(--dim); }
.pj-air-empty { color: var(--dim); font-family: var(--ui) !important; white-space: normal !important; padding: 12px 8px !important; }
.pj-air-tbl .tag { font-size: 10px; padding: 1px 6px; }

/* hash size check */
.pj-air-htop { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pj-air-hbig { display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px; }
.pj-air-hbig b { font: 800 clamp(28px, 2.6vw, 42px) / 1.05 var(--display); color: var(--cyan); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px currentColor; }
.pj-air-hbig small { font: 600 12px var(--mono); color: var(--dim); }
.pj-air-sizes { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-air-sz { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); font: 700 16px var(--mono); }
.pj-air-sz b { font: 600 10px var(--mono); color: var(--dim); text-transform: uppercase; }
.pj-air-sz.ok { border-color: rgba(57, 255, 136, .5); color: var(--lime); }
.pj-air-sz.bad { border-color: rgba(255, 59, 92, .55); color: var(--red); }
.pj-air-hfoot { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pj-air-hfoot .pj-air-note { flex: 1 1 240px; }

@media (max-width: 480px) {
  .pj-air-gauge { margin: 0 auto; }
  .pj-air-nm { max-width: 140px; }
}