/*
 * Building blocks: a tabbed overview (the map, then one tab per layer),
 * then the layers of a bounded context in detail.
 * One flat color per layer, used everywhere on the page.
 */
#df-react {
    --bb-domain: var(--bh-red);
    --bb-application: var(--bh-blue);
    --bb-infrastructure: var(--bh-ink);
    --bb-wiring: var(--bh-green);
    --bb-presentation: #f2b705;

    & .bb-domain {
        --bb-layer: var(--bb-domain);
        --bb-on-layer: #fff;
    }
    & .bb-application {
        --bb-layer: var(--bb-application);
        --bb-on-layer: #fff;
    }
    & .bb-infrastructure {
        --bb-layer: var(--bb-infrastructure);
        --bb-on-layer: var(--bh-paper);
    }
    & .bb-wiring {
        --bb-layer: var(--bb-wiring);
        --bb-on-layer: #fff;
    }
    & .bb-presentation {
        --bb-layer: var(--bb-presentation);
        --bb-on-layer: var(--bh-ink);
    }

    /* Deck: tabs on top, one panel at a time once the script runs. */
    & .bb-deck {
        margin-top: 20px;
        border: var(--bh-rule);
    }
    & .bb-tabs {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        border-bottom: var(--bh-rule);
    }
    & .bb-tabs button {
        margin: 0;
        padding: 14px 16px;
        border: 0;
        border-top: 10px solid var(--bb-layer, var(--bh-paper));
        border-radius: 0;
        background: var(--bh-paper);
        color: var(--bh-ink);
        font: inherit;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-align: left;
        text-transform: uppercase;
        cursor: pointer;
    }
    & .bb-tabs button + button {
        border-left: 1px solid var(--bh-ink);
    }
    & .bb-tabs button:hover {
        background: #22221e24;
    }
    & .bb-tabs button[aria-selected='true'] {
        background: var(--bh-ink);
        color: var(--bh-paper);
    }
    & .bb-tabs button:focus-visible {
        outline: 2px solid var(--bh-ink);
        outline-offset: -4px;
    }
    & .bb-tabs button[aria-selected='true']:focus-visible {
        outline-color: var(--bh-paper);
    }
    & .bb-panel {
        padding: 18px 20px;
    }
    & .bb-panel + .bb-panel {
        border-top: var(--bh-rule);
    }
    & .bb-deck.is-deck .bb-panel + .bb-panel {
        border-top: 0;
    }
    /* Wins over any display a panel gets elsewhere. */
    & .bb-deck.is-deck .bb-panel[hidden] {
        display: none !important;
    }
    & .bb-panel:not(#bb-panel-map) {
        border-left: 12px solid var(--bb-layer);
    }
    & .bb-panel > p {
        margin: 12px 0 0;
    }
    & .bb-panel > .bb-sub-2:first-child,
    & .bb-panel > code:first-child + p {
        margin-top: 12px;
    }
    & .bb-panel [data-label]::before {
        content: attr(data-label) ': ';
        font-weight: 700;
    }

    /* Map */
    & .bb-map-row {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        align-items: center;
        gap: 12px;
    }
    & .bb-map-row > code {
        justify-self: start;
    }
    & .bb-contexts {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
        align-items: center;
        gap: 10px;
    }
    & .bb-contexts-one {
        grid-template-columns: minmax(0, 1fr);
    }
    /* The map stays quieter than the tabs above it, so the tabs read as navigation. */
    & .bb-context {
        min-width: 0;
        border: 1px solid var(--bh-ink);
    }
    & .bb-context strong {
        display: block;
        padding: 4px 10px;
        font-weight: 400;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    & .bb-bar {
        display: block;
        height: 6px;
        border-top: 1px solid var(--bh-ink);
        background: linear-gradient(
            90deg,
            var(--bb-domain) 0 20%,
            var(--bb-application) 20% 40%,
            var(--bb-infrastructure) 40% 60%,
            var(--bb-wiring) 60% 80%,
            var(--bb-presentation) 80% 100%
        );
    }
    & .bb-no {
        color: var(--bh-red);
    }
    & .bb-uses {
        margin: 10px 0;
        text-align: center;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    & .bb-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
        margin: 16px 0 20px;
        padding: 0;
        list-style: none;
    }
    & .bb-legend li {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    & .bb-legend li::before {
        content: '';
        width: 14px;
        height: 14px;
        background: var(--bb-layer);
    }

    /* Inside a context: a heading per layer, then its topics. */
    & .bb-sub {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 16px;
        margin: 36px 0 0;
        padding: 12px 20px;
        border-left: 12px solid var(--bb-layer);
        background: var(--bh-ink);
        color: var(--bh-paper);
        font-size: var(--df-heading) !important;
        font-weight: 400;
        letter-spacing: 0.04em;
        line-height: 1.2;
        text-transform: uppercase;
        scroll-margin-top: 16px;
    }
    & .bb-sub code {
        padding: 0;
        border: 0;
        background: none;
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
        text-transform: none;
    }
    & .bb-sub-2 {
        margin: 32px 0 0;
        padding-bottom: 8px;
        border-bottom: var(--bh-rule);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        scroll-margin-top: 16px;
    }
    /* The gap shows the ink background: rules between cards in any grid shape. */
    & .bb-parts {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 3px;
        margin-top: 16px;
        border: var(--bh-rule);
        background: var(--bh-ink);
    }
    & .bb-parts > div {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        min-width: 0;
        padding: 14px 16px;
        background: var(--bh-paper);
    }
    & .bb-parts > div > span {
        padding: 2px 8px;
        background: var(--bh-red);
        color: #fff;
    }
    & .bb-parts p {
        margin: 0;
    }
    & .bb-parts code {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 1100px) {
    #df-react {
        & .bb-tabs {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
        & .bb-tabs button:nth-child(4) {
            border-left: 0;
        }
        & .bb-tabs button:nth-child(n + 4) {
            border-top-width: 10px;
            box-shadow: inset 0 1px 0 var(--bh-ink);
        }
        & .bb-parts {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
}

@media (max-width: 760px) {
    #df-react {
        & .bb-tabs {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        & .bb-tabs button:nth-child(4) {
            border-left: 1px solid var(--bh-ink);
        }
        & .bb-tabs button:nth-child(odd) {
            border-left: 0;
        }
        & .bb-tabs button:nth-child(n + 3) {
            box-shadow: inset 0 1px 0 var(--bh-ink);
        }
        & .bb-map-row {
            grid-template-columns: minmax(0, 1fr);
            gap: 8px;
        }
        & .bb-contexts {
            grid-template-columns: minmax(0, 1fr);
            justify-items: center;
            gap: 6px;
        }
        & .bb-context {
            width: 100%;
        }
        & .bb-parts {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}