/* Personal grouping belongs to the played deck only, not its planning zones. */
[data-deck-grouping-root] > .deck-panel-heading { align-items: flex-start; }
.deck-grouping-tools,
.deck-grouping-form,
.deck-grouping-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    min-width: 0;
}
.deck-grouping-tools { justify-content: flex-end; align-items: flex-start; }
.deck-grouping-form { margin: 0; flex-direction: column; align-items: flex-start; gap: .25rem; }
.deck-grouping-tools > .count-badge { margin-top: .45rem; }
.deck-grouping-select { color: var(--paper-400); font-size: .85rem; }
.deck-grouping-select select {
    width: auto;
    min-height: 44px;
    padding-block: .4rem;
    font-size: .85rem;
}
.deck-grouping-multiple {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    max-width: 100%;
    color: var(--paper-300);
    font-size: .8rem;
    cursor: pointer;
}
.deck-grouping-multiple input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--blue-300);
}
/* Reserve the checkbox's row and width in Type view. Revealing it must not
   reposition the selector, count, title, or the deck sections below the header. */
.deck-grouping-multiple[hidden] {
    display: flex;
    visibility: hidden;
    pointer-events: none;
}
.deck-grouping-error[hidden],
.deck-grouping-ready .deck-grouping-apply { display: none; }
.deck-grouping-error {
    flex-basis: 100%;
    margin: 0;
    max-width: 28rem;
    font-size: .8rem;
    color: var(--paper-300);
}
.deck-command-section { margin-bottom: 1.6rem; }
[data-deck-main-groups] .deck-type-heading > span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
[data-deck-main-groups] .deck-type-count { flex-shrink: 0; }
@media (max-width: 40rem) {
    [data-deck-grouping-root] > .deck-panel-heading { align-items: flex-start; flex-wrap: wrap; }
    .deck-grouping-tools { width: 100%; justify-content: flex-start; flex-wrap: nowrap; align-items: flex-start; }
    .deck-grouping-form { flex: 1 1 0; }
    .deck-grouping-tools > .count-badge { flex: 0 0 auto; }
}