/* Breadcrumb trail bar (NavTrail, breadcrumbnavigation PRD). Colors from theme variables only.
   The bar is a flex item above .visualization-panel inside .main-area and is [hidden]
   (display none, zero height) unless the user followed an in-app link to this page. */
.nav-trail {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 8px 20px;
    background: var(--ui-backgrounds-pageBg);
    border-bottom: 1px solid var(--ui-borders-borderLight);
}

.nav-trail[hidden] { display: none; }

.nav-trail__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    font-weight: 600;
}

.nav-trail__item { display: inline-flex; align-items: center; }

.nav-trail__link {
    color: var(--ui-text-secondaryText);
    text-decoration: none;
}

.nav-trail__link:hover,
.nav-trail__link:focus-visible { color: var(--color-blue-6); }

.nav-trail__sep { color: var(--ui-text-mutedText); font-size: 12px; } /* decorative, aria-hidden */

.nav-trail__more { color: var(--ui-text-secondaryText); }

/* The page you are on: primary text (muted gray was 2.4:1 on the light page, under AA). */
.nav-trail__current { color: var(--ui-text-primaryText); }

@media (max-width: 640px) {
    /* Phone width: keep only the way back and the current page. */
    .nav-trail__item:not(.nav-trail__item--back):not(.nav-trail__current),
    .nav-trail__sep { display: none; }
}