/* =============================================================
   tabs.css  ·  faces/home/mobile/  ·  standalone
   The 6-tab subheader strip (paged-with-tabs pattern from najmadin v05).
   Depends on: shared/tokens.css for colours.
   ============================================================= */

.home-subheader.carousel-tabs {
    background: var(--header-bg);
    border-bottom: 1px solid var(--brand-active);
    overflow: hidden;

    /* R14: 6 equal columns via grid (never flex) */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    padding: 4px 4px 0 4px;
}

.carousel-tab {
    height: 100%;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--brand-active);
    background: var(--card-bg);            /* same fill as the chips */
    border: none;                           /* no outline */
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /* no transition — instant flip */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: grid;
    place-items: center;
}

.carousel-tab[aria-selected="true"] {
    background: var(--brand-active);
    color: var(--brand);
}

.carousel-tab:active {
    transform: scale(0.97);
}