.menu-grid,
.menu-grid-1col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    height: 100%;
    /* more tiles than the screen has room for scroll (inside a card or the page) instead of being clipped by the Close bar */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* every tile the same size: minmax(0, 1fr) so a long word cannot widen its column (1fr alone keeps the content's width), 1fr rows so a wrapped label cannot make its row taller */
.menu-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--wm-tile-row-height-tall);
    align-content: start;
    gap: .75rem;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
}

/* the icon sits close above the label and the pair is centred with room above and below (owner, 18 October 2026); the tile is the row height, not the Shared tile
   minimum, but never under the tap target (48 px, --wm-tap-target: owner, 19 October 2026; HandheldTapTargetRule) */
.menu-grid-2col .menu-tile.btn {
    min-height: var(--wm-tap-target);
    gap: .2rem;
    padding: .6rem .5rem;
}

.menu-grid-2col .menu-tile.btn i {
    line-height: 1;
}

@media (min-width: 600px) {
    .menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 900px) {
    .menu-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1200px) {
    .menu-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (min-width: 1500px) {
    .menu-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}


@media (orientation: portrait) {
    .menu-grid {
        grid-template-columns: 1fr;
    }
}

@media (orientation: landscape) {
    .menu-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

/* single-column menus (the area and main menus, the search menu, the My Jobs tiles, the Today / This Week / This Month tiles): the icon sits BESIDE the text,
   vertically centred with it, which makes a slim row; a two-column grid (the status and strategy lists) keeps the icon above the text.
   .menu-grid-tall is the area and main menus (owner, 17 October 2026): taller, so a paused job's caption fits under the label. */
@media (orientation: portrait) {
    .menu-grid {
        align-content: start;
        grid-auto-rows: var(--wm-tile-row-height);
    }

    .menu-grid-tall {
        grid-auto-rows: var(--wm-tile-row-height-tall);
    }

    /* rows: space, the label, the caption (none: 0 high), space: the label (and caption) stays centred beside the icon either way */
    .menu-grid .menu-tile.btn {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: "icon ." "icon text" "icon caption" "icon .";
        justify-items: start;
        text-align: left;
        gap: 0;
        /* the row height decides the tile's height, never under the tap target (48 px, --wm-tap-target: owner, 19 October 2026; HandheldTapTargetRule) */
        min-height: var(--wm-tap-target);
        padding: .25rem 1rem;
    }

    .menu-grid .menu-tile.btn i {
        grid-area: icon;
        align-self: center;
        font-size: 1.75rem;
        margin-right: .9rem;
    }

    /* a tile without an icon (the search menu) draws no empty column */
    .menu-grid .menu-tile.btn i:not([class*="bi"]) {
        display: none;
    }

    .menu-grid .menu-tile.btn > span {
        grid-area: text;
    }

    .menu-grid .menu-tile.btn .menu-tile-caption {
        grid-area: caption;
        margin-top: .15rem;
    }
}