/* Board selector widget (sidebar placement) */
.board-selector {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 12px;
    text-align: left;
}
.board-selector label {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 0.85em;
    color: #fff;
}
.board-selector select {
    width: 100%;
    padding: 4px 6px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: #fff;
    color: #333;
    font-size: 0.9em;
}

/* "All Boards" mode: visible container around each board block */
.board.board-show-all {
    border-left: 4px solid #4a90c4;
    background: #f5f8fb;
    padding: 12px 12px 4px 16px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
}

/* Board badge: header bar at top of each block in "All Boards" mode */
.board-badge {
    display: none;
    background: #4a90c4;
    color: #fff;
    padding: 4px 10px;
    margin: -12px -12px 12px -16px;
    border-radius: 0 4px 0 0;
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* Pin the badge to the top of the viewport while the reader
       scrolls through a long board block in "All Boards" mode, so
       the family / board context stays visible. The badge is
       hidden (display: none) when a specific board is selected,
       so this only takes effect in all-boards mode. */
    position: sticky;
    /* Sit immediately below the breadcrumb bar (defined in
       ``breadcrumb_bar.css``). When the bar is toggled off or
       not present, the variable defaults to ``0px`` and the
       badge pins to the very top as before. */
    top: var(--breadcrumb-bar-h, 0px);
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Board-content admonition for PDF all-boards mode */
.admonition.board-content {
    border-left: 4px solid #4a90c4;
    background: #f5f8fb;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 4px 4px 0;
}
.admonition.board-content > .admonition-title {
    background: #4a90c4;
    color: #fff;
    padding: 4px 10px;
    margin: -12px -16px 12px -16px;
    border-radius: 0 4px 0 0;
    font-size: 0.85em;
    font-weight: 600;
}