/* 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. */
/* A card's header band and rows are clipped to the card's own corners
   (0.2.3): a theme that rounds cards more than Bootstrap's inner radius
   otherwise has the band's square corners showing over the round ones. */
.com-appsync .appsync-card {
    overflow: hidden;
}

.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;
}

/* Shop links (0.3.3): a pill in the shop's own colours, beside the field
   it buys (the item's name) or at the end of a row. Amazon's is its yellow
   button with near-black text, the same in light and dark, and never its
   logo. Every state is set, as a theme's link colours otherwise win. */
.com-appsync .appsync-shop {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0.5rem 1.25rem;
    border: 1px solid transparent;
    border-radius: 100px;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
}

.com-appsync .appsync-shop-amazon,
.com-appsync .appsync-shop-amazon:visited {
    background-color: #ffd814;
    border-color: #fcd200;
    color: #0f1111;
    box-shadow: 0 2px 5px 0 rgba(15, 17, 17, 0.15);
}

.com-appsync .appsync-shop-amazon:hover,
.com-appsync .appsync-shop-amazon:focus-visible {
    background-color: #f7ca00;
    border-color: #f2c200;
    color: #0f1111;
    text-decoration: none;
}

.com-appsync .appsync-shop-amazon:focus-visible {
    outline: 2px solid #0f1111;
    outline-offset: 2px;
}

/* A field with a shop link beside it; on a phone the link goes under. */
.com-appsync .appsync-beside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.com-appsync .appsync-beside-field {
    flex: 1 1 14rem;
    min-width: 0;
}

/* A row's link keeps clear of the card's edge. */
.com-appsync .appsync-row-shop {
    padding-right: 1rem;
}