/* Presentation only: keep native modal isolation, focus and recharge guards. */
#queryDialog::backdrop {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Four current tools share a row on desktop and a two-by-two mobile grid. */
#rechargeWorkbench #cardToolNav:not([hidden]),
#progressDraftPanel #progressDraftToolNav:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-width: 0;
    gap: 10px;
}

#rechargeWorkbench #cardToolNav[hidden],
#progressDraftPanel #progressDraftToolNav[hidden] {
    display: none !important;
}

#rechargeWorkbench #cardToolNav:not([hidden]) > button,
#progressDraftPanel #progressDraftToolNav:not([hidden]) > button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-column: auto;
    margin: 0;
    white-space: normal;
}

#rechargeWorkbench #cardToolNav > button span,
#progressDraftPanel #progressDraftToolNav > button span {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    #rechargeWorkbench #cardToolNav:not([hidden]),
    #progressDraftPanel #progressDraftToolNav:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #rechargeWorkbench #cardToolNav:not([hidden]) > button,
    #progressDraftPanel #progressDraftToolNav:not([hidden]) > button {
        flex: initial;
        min-height: 44px;
        height: auto;
        padding: 10px 8px;
        gap: 6px;
        font-size: 13px;
        line-height: 1.5;
    }

    #rechargeWorkbench #cardToolNav > button svg,
    #progressDraftPanel #progressDraftToolNav > button svg {
        flex: none;
    }
}