/* 1. Main Containers */
.monitor-box {
    width: 100%;
    min-height: 400px;
    box-sizing: border-box;
    padding: 10px; 
    background-color: #000;
    border: 1px solid #333;
}

/* 2. The Telemetry Grid */
#physics-stream {
    display: grid;
    /* This creates the columns for the small items (ID, ASL, etc) */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px 15px;
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    background: #111;
    color: #0f0; 
    font-family: 'Courier New', monospace;
    font-size: 14px;
    user-select: text; /* Crucial: ensures browser allows selection */
    overflow-x: hidden;
}

/* 3. Grid Items */
.grid-item {
    white-space: nowrap; /* Keep small telemetry on one line */
}

/* 4. The Name/Meta "Break-out" Fix */
.full-width {
    grid-column: 1 / -1; /* Spans all grid columns */
    display: block;      /* Forces it to ignore the column widths and use 100% */
    width: 100%;
    white-space: normal; /* Allows wrapping ONLY at the actual edge of the box */
    word-break: break-word;
}

/* 5. Values Styling */
#physics-stream span {
    color: #fff; /* White values for high contrast */
    font-weight: bold;
}

/* 6. Mobile Responsiveness */
@media (max-width: 600px) {
    #physics-stream {
        grid-template-columns: 1fr 1fr; /* 2 columns on small screens */
        font-size: 12px;
    }
}