html, body   { height: 100%; margin: 0; overflow: hidden; }
body         { display: flex; flex-direction: column; }
#top         { display: flex; flex: 1; min-height: 0; }
#map         { min-width: 0; width: 65%; }
#table-wrapper { overflow-y: auto; min-width: 0; display: flex; flex-direction: column; }
#profile     { height: 240px; flex-shrink: 0; }

.gutter { background: #ccc; }
.gutter.gutter-horizontal { cursor: col-resize; }
.gutter.gutter-vertical   { cursor: row-resize; }


.map-cp-label {
    background: #ffffff99;
    border: none;
    box-shadow: none;
    color: black;
    font-size: 14px;
    padding: 0px;
    
}

/* remove the default arrow/tip */
.map-cp-label::before {
    display: none;
}

body{
    font-family:'DM Mono', monospace;
}

th {
    text-align: right; font-weight: 400;
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 4px 8px;
    border-bottom: 1px solid black; white-space: nowrap;
}
th:first-child { text-align: left; }

td {
    padding: 7px 8px;
    text-align: right;
}

td:first-child { text-align: left; }

.cp-actual {
    font-weight: 500;
}

.cp-forecast {
    color: #888;
    font-weight: 300;
}

.cp-current td {
    border-top: 2px solid black;
}

.map-position-control {
    background: white;
    padding: 6px 10px;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'DM Mono', monospace;
    font-size: 12px;
}

.map-position-control button {
    font-family: inherit;
    font-size: inherit;
    padding: 4px 8px;
    cursor: pointer;
}

.map-position-control label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.ping-info {
    font-family: inherit;
    font-size: 12px;
    color: #666;
    padding: 4px 8px;
    flex-shrink: 0;
    margin-top: auto;
}

#mobile-tabs { display: none; }

@media (max-width: 768px) {
    #mobile-tabs {
        display: flex;
        flex-shrink: 0;
        border-bottom: 1px solid black;
    }
    #mobile-tabs button {
        flex: 1;
        font-family: inherit;
        font-size: 14px;
        padding: 10px;
        background: white;
        color: black;
        border: none;
        border-right: 1px solid #ccc;
        cursor: pointer;
    }
    #mobile-tabs button:last-child { border-right: none; }
    #mobile-tabs button.active { background: #eee; font-weight: 500; }

    /* Only one of map / table / chart is shown at a time, driven by
       body[data-view]. #top wraps map+table; #profile (the chart) is a
       sibling — both need showing/hiding as whole blocks, not just their
       inner panels, since #top's own flex layout would otherwise still
       reserve space for a "hidden" child. */
    #top     { display: none; flex-direction: column; }
    #profile { display: none; height: auto; flex: 1; }

    body[data-view="map"]   #top { display: flex; }
    body[data-view="map"]   #map { display: block; width: 100%; height: 100%; }
    body[data-view="map"]   #table-wrapper { display: none; }

    body[data-view="table"] #top { display: flex; }
    body[data-view="table"] #map { display: none; }
    body[data-view="table"] #table-wrapper { display: flex; width: 100%; height: 100%; }

    body[data-view="chart"] #profile { display: block; }

    /* Table is dense (12 columns); desktop's padding/sizing is too roomy
       for a phone screen, so tighten both on mobile only. */
    th, td { font-size: 11px; padding: 3px 4px; }
}