.nuline-branch-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*
 * Default card look — border + tinted background — so each panel reads as
 * a distinct block even if the Style tab colors are left untouched.
 * rgba-on-transparent (not a fixed hex) so it holds up on both light and
 * dark page backgrounds instead of only looking right on one.
 */
.nuline-branch-toggle {
    border: 1px solid rgba(127, 127, 127, 0.3);
    border-radius: 6px;
    overflow: hidden;
    background-color: rgba(127, 127, 127, 0.06);
}

.nuline-branch-toggle__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    list-style: none;
    background-color: rgba(127, 127, 127, 0.1);
    transition: background-color 0.15s ease;
}

.nuline-branch-toggle__header:hover {
    background-color: rgba(127, 127, 127, 0.16);
}

.nuline-branch-toggle__header::-webkit-details-marker {
    display: none;
}

/* Divider between header and body — only when open, so a closed panel
   (header only, no body) doesn't show a stray bottom border. */
.nuline-branch-toggle[open] .nuline-branch-toggle__header {
    border-bottom: 1px solid rgba(127, 127, 127, 0.3);
}

.nuline-branch-toggle__title {
    font-weight: 600;
}

.nuline-branch-toggle__chevron {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.nuline-branch-toggle[open] .nuline-branch-toggle__chevron {
    transform: rotate(180deg);
}

.nuline-branch-toggle__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.nuline-branch-toggle__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.nuline-branch-toggle__row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-top: 2px;
}

.nuline-branch-toggle__row-text a {
    color: inherit;
    text-decoration: none;
}

.nuline-branch-toggle__row-text a:hover {
    text-decoration: underline;
}