/* The panorama choices under the generator's action bar. No box (Broadsheet): white space only.
   Rules that hide a `.btn` name the root too — component CSS comes before app.css in the same
   layer, so a one-class rule loses to `.btn { display: inline-flex }`. */
@layer components {
    .panorama-join {
        padding-block-start: var(--space-4);

        &[data-state='closed'] {
            display: none;
        }

        &[data-busy='true'] .panorama-join__form,
        &[data-state='loading'] .panorama-join__form {
            opacity: 0.6;
            pointer-events: none;
        }
    }

    .panorama-join__panel,
    .panorama-join__form {
        display: grid;
        gap: var(--space-2);
        max-inline-size: var(--measure);
    }

    .panorama-join__title,
    .panorama-join__text {
        margin: 0;
    }

    /* Nothing to choose: removed by the author, or the membership could not be read. */
    .panorama-join[data-state='removed'] .panorama-join__form,
    .panorama-join[data-state='unknown'] .panorama-join__form {
        display: none;
    }

    /* A whole row is the touch target (≥ 44 px); the checkbox keeps its size beside a long label
       (QA R2-9: it shrank to 13 × 20 px as a flex item). */
    .panorama-join__option {
        display: flex;
        gap: var(--space-3);
        align-items: center;
        min-block-size: 44px;
        padding-block: var(--space-1);
        cursor: pointer;

        &[hidden] {
            display: none;
        }

        & input {
            flex: none;
            inline-size: 1.375rem;
            block-size: 1.375rem;
            margin: 0;
            accent-color: var(--color-accent);
        }
    }

    .panorama-join__label {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .panorama-join__aside {
        color: var(--color-text-muted);
        font-size: var(--text-s);
    }

    .panorama-join__actions,
    .panorama-join__after {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .panorama-join .panorama-join__update-label,
    .panorama-join .panorama-join__leave,
    .panorama-join .panorama-join__reload {
        display: none;
    }

    .panorama-join .panorama-join__after {
        display: none;
    }

    .panorama-join[data-state='removed'] .panorama-join__after,
    .panorama-join[data-state='unknown'] .panorama-join__after {
        display: flex;
    }

    .panorama-join[data-state='unknown'] .panorama-join__reload {
        display: inline-flex;
    }

    .panorama-join[data-state='joined'] {
        & .panorama-join__join-label {
            display: none;
        }

        & .panorama-join__update-label {
            display: inline;
        }

        & .panorama-join__leave {
            display: inline-flex;
        }
    }
}