/* Device rows keep a stable order; fields wrap to the available screen width. */
main{max-width:none}
.quick-filters{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap;margin:1rem 0}
.quick-filters label{flex:1;min-width:min(100%,240px);max-width:600px}
#packets .tableScroll{overflow:visible}
#packetTable{table-layout:fixed;white-space:normal;width:100%}
#packetTable th:first-child{width:100px}
#packetTable th:nth-child(2){width:205px}
#packetTable th:last-child{width:100px}
#packetTable td button{white-space:nowrap}
#packetTable td{white-space:normal;overflow-wrap:anywhere;max-width:none;vertical-align:top;overflow:visible}
#packetTable .device-number{font-weight:700;color:#0a6873}
#packetTable .device-meta{font-size:.875rem;color:#526879;margin-top:.45rem;line-height:1.5}
.payload-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;min-width:0;width:100%}
.payload-field{min-width:0;container-type:inline-size}
.payload-field span{display:block;color:#526879;font-size:clamp(9px,13cqw,14px);margin-bottom:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.payload-field strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:Consolas,monospace;font-size:clamp(10px,14cqw,14px);font-weight:500;line-height:1.5}
.danger.quiet{color:#a12b2b;border-color:#c88686}
#packets>.titleRow>.headerRight{flex-wrap:wrap;justify-content:flex-end}
#packetTable tr.packet-arrived{animation:packet-arrived 2.2s ease-out}
@keyframes packet-arrived{0%,25%{background-color:#8aefab}100%{background-color:transparent}}
@media(max-width:750px){
  #packetTable thead{display:none}
  #packetTable tbody{display:block}
  #packetTable tr{display:grid;grid-template-columns:95px minmax(0,1fr);border-bottom:2px solid #d7e2ea}
  #packetTable td{border:0;padding:.7rem}
  #packetTable td:nth-child(3),#packetTable td:nth-child(4){grid-column:1/-1}
  .tableTop{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){#packetTable tr.packet-arrived{animation:none;background:#b2f1c6}}