/* AppSync member area. Vanilla Bootstrap on top; only layout here, no colours. */
.com-appsync .control-group { display: block; margin: 0 0 1rem 0; padding: 0; }
.com-appsync .control-label,
.com-appsync .controls { display: block; width: 100%; max-width: 100%; flex: none; margin: 0; padding: 0; }
.com-appsync .control-label { margin-bottom: 0.5rem; text-align: left; }
.com-appsync .control-label > label { margin: 0; }
.com-appsync .star { display: none; }
.com-appsync .appsync-form { max-width: 40rem; }
.com-appsync .appsync-actions form { margin: 0; }
.com-appsync .appsync-days .form-check-inline { margin-right: 0.75rem; }
.com-appsync .appsync-list .list-group-item { word-break: break-word; }
.com-appsync .appsync-invite { min-width: 0; }
@media (max-width: 575.98px) {
    .com-appsync .appsync-actions { width: 100%; }
    .com-appsync .appsync-actions form { flex: 1 1 auto; }
    .com-appsync .appsync-actions .btn { width: 100%; }
}

/* The overview's cards (0.1.16): two balanced columns from lg, reading down
   the left column then the right, so a short card never stretches to match
   a long one beside it and a phone keeps the schema's order. */
.com-appsync .appsync-cards {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 992px) {
    .com-appsync .appsync-cards {
        column-count: 2;
    }
}

.com-appsync .appsync-cards-item {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 1rem;
}

/* Card headers: a shaded band in the theme's secondary background, so it
   follows light and dark. Set directly rather than through the card's cap
   variable, because templates name that differently: Cassiopeia builds
   Bootstrap without the bs- prefix (--card-cap-bg). The fallbacks run
   from a site's own choice, to Bootstrap's --bs-secondary-bg (which
   Themer sets from its Secondary background), to Cassiopeia's own. */
.com-appsync .appsync-card > .card-header {
    background-color: var(--appsync-card-header-bg, var(--bs-secondary-bg, var(--secondary-bg, #e9ecef)));
}

/* A tab with a single card uses the full width. */
.com-appsync .appsync-cards-one .appsync-cards-item {
    margin-bottom: 1rem;
}