/*
 * Panel-bar lattice — both rows share one column track.
 *
 * an-viz-geo seats a row with `plate_w = width / n`
 * (`place_ids_on_row`). Same here: orientation tabs own n
 * (`--bar-modules`), and the interaction row occupies those
 * modules instead of content-sizing [← ⚙] / chips / [X].
 *
 *   module 1     → [← ⚙] as equal halves
 *   modules 2..n-1 → search / chips / empty (equal; scroll if more)
 *   module n     → [X]
 *
 * Tracks never shrink below `--bar-button-size`. Extra tabs
 * scroll the whole bar so the two rows stay locked.
 */

.m-panel-bar {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    scrollbar-width: none;
}

.m-panel-bar::-webkit-scrollbar {
    display: none;
}

.m-panel-bar__row--top,
.m-panel-bar__row--bottom {
    display: grid;
    grid-template-columns: repeat(
        var(--bar-modules),
        minmax(var(--bar-button-size), 1fr)
    );
    align-items: stretch;
    min-width: calc(var(--bar-modules) * var(--bar-button-size));
}

.m-panel-bar__row--top {
    overflow-x: visible;
}

.m-panel-bar__switcher,
.m-panel-bar__sub-tabs {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(
        var(--bar-tabs),
        minmax(var(--bar-button-size), 1fr)
    );
    min-width: 0;
    flex: unset;
}

.m-panel-bar__switcher-tab,
.m-panel-bar__sub-tab {
    min-width: 0;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-panel-bar__leading {
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 0;
    flex-shrink: unset;
}

.m-panel-bar__middle {
    grid-column: 2 / -2;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--bar-button-size), 1fr);
    min-width: 0;
    flex: unset;
    overflow-x: auto;
}

.m-panel-bar__chips {
    display: contents;
    flex: unset;
}

.m-panel-bar__search,
.m-panel-bar__middle-empty {
    min-width: 0;
    width: 100%;
    flex: unset;
}

.m-panel-bar__trailing {
    grid-column: -2 / -1;
    min-width: 0;
    flex-shrink: unset;
}

.m-panel-bar__stable {
    width: 100%;
    min-width: 0;
    height: 100%;
}

.m-panel-bar__chip {
    min-width: 0;
    width: auto;
    flex: unset;
}

/* Kill the mobile height drift (48px / 40px) that broke the
   shared cell and made the lattice worse on a narrow screen. */
@media (max-width: 480px) {
    .m-panel-bar__row {
        height: var(--bar-row-height-top);
    }
    .m-panel-bar__row--top {
        height: calc(var(--bar-row-height-top) + var(--bar-row-divider-thickness));
    }
    .m-panel-bar__row--bottom {
        min-height: var(--bar-row-height-bottom);
        height: auto;
    }
    .m-panel-bar__stable,
    .m-panel-bar__switcher-tab,
    .m-panel-bar__sub-tab,
    .m-panel-bar__search {
        height: 100%;
        min-height: var(--bar-button-size);
        min-width: 0;
    }
}