/* Shared detail tabs and the mobile tab bar of x-bw::content.detail-layout (R6b).
   Typography and paddings equal the aside heading in "tab" mode (content-shell.css), so the
   first tab head and the first sidebar heading have the same height and look. Global tokens only. */

.bw-detail-tabs {
    --bw-tabs-accent: var(--bw-color-primary-500, var(--bw-interaction-button-bg, currentColor));
    --bw-tabs-accent-text: var(--bw-color-primary-700, var(--bw-interaction-link-color, currentColor));
    --bw-tabs-muted: var(--bw-color-text-500, rgba(0, 0, 0, .55));
    --bw-tabs-border: var(--bw-color-border-200, rgba(0, 0, 0, .12));
    --bw-detail-tabs-indicator-h: 3px;
    --bw-detail-tabs-fade: 2rem;
}

.bw-detail-tabs[hidden] { display: none; }

.bw-detail-tabs__header {
    position: relative;
}

.bw-detail-tabs__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--bw-tabs-border);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bw-detail-tabs__scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Cut-off tabs show that the bar continues. */
.bw-detail-tabs__scroll.has-overflow-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--bw-detail-tabs-fade)), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--bw-detail-tabs-fade)), transparent);
}

.bw-detail-tabs__scroll.has-overflow-start {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--bw-detail-tabs-fade)), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - var(--bw-detail-tabs-fade)), transparent);
}

.bw-detail-tabs__scroll.has-overflow-start.has-overflow-end {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--bw-detail-tabs-fade), #000 calc(100% - var(--bw-detail-tabs-fade)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--bw-detail-tabs-fade), #000 calc(100% - var(--bw-detail-tabs-fade)), transparent);
}

.bw-detail-tabs__tablist {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
    margin: 0;
    padding: 0;
}

.bw-detail-tabs__tab {
    flex: none;
    margin: 0;
    padding: var(--bw-tabs-tab-padding-y, var(--bw-space-button-y, .75rem)) var(--bw-tabs-tab-padding-x, calc(var(--bw-space-button-x, 1.25rem) * 1.6));
    border: 0;
    background: transparent;
    color: var(--bw-tabs-muted);
    font: inherit;
    font-size: var(--bw-copy-font-size, 1rem);
    line-height: var(--bw-copy-line-height, 1.5);
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    box-shadow: inset 0 0 0 transparent;
}

.bw-detail-tabs__tab:hover { color: var(--bw-tabs-accent-text); }

.bw-detail-tabs__tab[aria-selected="true"] {
    color: var(--bw-tabs-accent-text);
    box-shadow: inset 0 calc(var(--bw-detail-tabs-indicator-h) * -1) 0 var(--bw-tabs-accent);
}

.bw-detail-tabs__tab:focus-visible {
    outline: 2px solid var(--bw-focus-ring-color, var(--bw-tabs-accent));
    outline-offset: -2px;
}

.bw-detail-tabs__tab[hidden] { display: none; }

.bw-detail-tabs__panel {
    padding-block-start: var(--bw-space-section-y-top, var(--bw-space-section-y, 1.5rem));
}

.bw-detail-tabs__panel[hidden] { display: none; }

.bw-detail-tabs__panel:focus-visible {
    outline: 2px solid var(--bw-focus-ring-color, var(--bw-tabs-accent));
    outline-offset: 4px;
}

/* Layout-owned mobile bar (Posts, Pages): only below the single-column breakpoint. */
.bw-detail-mobile-tabs {
    grid-column: 1 / -1;
    padding-inline: var(--bw-page-inline-gutter, 1rem);
    margin-block-start: var(--bw-space-grid-y, 1.5rem);
}

@media (min-width: 1280px) {
    .bw-detail-mobile-tabs,
    .bw-detail-tabs__tab[data-bw-detail-aside-tab] { display: none !important; }
}

/* While the mobile bar is active, the sidebar is a tab panel without the stacked margin. */
@media (max-width: 1279px) {
    .bw-content-detail[data-bw-detail-mobile-active="1"] > .bw-content-detail__aside--right {
        margin-block-start: 0;
        padding-block-start: var(--bw-space-section-y-top, var(--bw-space-section-y, 1.5rem));
    }

    .bw-content-detail[data-bw-detail-mobile-active="1"] > .bw-content-detail__aside[hidden],
    .bw-content-detail[data-bw-detail-mobile-active="1"] > .bw-content-detail__main[hidden] { display: none; }
}

@media print {
    .bw-detail-tabs__header { display: none; }
    .bw-detail-tabs__panel[hidden],
    .bw-content-detail > [hidden] { display: block !important; }
}