/* Phone action bar – three equal targets, 64px tall plus the home-indicator inset. */

.action-bar {
    position: fixed;
    inset: auto 0 0;
    z-index: 48;
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    padding-block-end: env(safe-area-inset-bottom);
    background: var(--color-graphite);
    box-shadow: 0 -10px 30px -18px rgb(0 0 0 / 50%);

    @media (min-width: 768px) { display: none; }
}

.action-bar__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    font: var(--text-13am);
    color: var(--color-chalk);
    text-decoration: none;

    & + & { border-inline-start: 1px solid var(--color-white-12); }

    & .icon {
        width: 22px;
        height: 22px;
        color: var(--color-oak);
    }

    &:active { background: var(--color-white-12); }
}

.action-bar__item--primary {
    color: var(--color-graphite);
    background: var(--color-oak);

    & .icon { color: var(--color-graphite); }
}

html.menu-is-open .action-bar { display: none; }

/* Out of the way while someone types – on phones the keyboard would push it over the fields. */
html:has(:is(input, textarea, select):focus) .action-bar { display: none; }