/*
 * Shared site chrome for the fixed project path bar.
 *
 * Page-level templates supply their existing color tokens. Theme modifiers keep
 * the light Rules page and the near-black Photography/MoodMaps pages visually
 * consistent without duplicating this component in every template.
 */
.path-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100vw;
    overflow: hidden;
    padding: 8px clamp(16px, 3vw, 42px);
    border-top: 1px solid var(--line, rgba(255, 255, 255, 0.14));
    background: rgba(18, 22, 21, 0.92);
    color: var(--muted, #aaa49a);
    font-size: 0.92rem;
    font-weight: 720;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.path-bar--high-z {
    z-index: 2500;
}

.path-bar a,
.path-bar span {
    min-width: 0;
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.path-bar a {
    color: var(--text, var(--ink, #e7e2da));
    text-decoration: none;
}

.path-bar a:hover {
    color: var(--accent, #d5b875);
}

.path-bar a:focus-visible {
    border-radius: 3px;
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.path-bar .current {
    flex: 1 1 auto;
    overflow: hidden;
    color: var(--muted, #aaa49a);
    text-overflow: ellipsis;
}

.path-bar .icp-link {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--muted, #aaa49a);
    font-size: 0.76rem;
    font-weight: 700;
    opacity: 0.86;
}

.path-bar .icp-link:hover {
    color: var(--text, var(--ink, #e7e2da));
    opacity: 1;
}

.path-separator {
    flex: 0 0 auto;
    color: var(--line-strong, rgba(231, 226, 218, 0.34));
}

.path-bar--light {
    z-index: 100;
    border-top-color: rgba(17, 17, 17, 0.12);
    background: rgba(245, 245, 244, 0.92);
}

.path-bar--light a {
    color: var(--ink, #171717);
}

.path-bar--light .path-separator {
    color: rgba(17, 17, 17, 0.3);
}

.path-bar--light .icp-link:hover {
    color: var(--ink, #171717);
}

.path-bar--black {
    background: rgba(5, 5, 5, 0.9);
}

.path-bar--black a {
    color: var(--ink, #f2f0ea);
}

.path-bar--black a:hover {
    color: var(--muted, #9a9790);
}

.path-bar--black .path-separator {
    color: rgba(255, 255, 255, 0.32);
}

.path-bar--black .icp-link:hover {
    color: var(--ink, #f2f0ea);
}

.path-bar--product {
    z-index: 30;
    border-top-color: var(--dark-line, rgba(255, 255, 255, 0.2));
    background: rgba(18, 18, 18, 0.96);
    color: #aaa7a0;
    font-size: 0.9rem;
    font-weight: 700;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.path-bar--product a {
    color: var(--white, #f4f2ec);
}

.path-bar--product .icp-link {
    color: #aaa7a0;
    font-size: 0.74rem;
}

.path-bar--product .path-separator {
    color: #777;
}

@media (max-width: 600px) {
    .path-bar {
        gap: 7px;
        padding-inline: 12px;
        font-size: 0.82rem;
    }

    .path-bar > a:not(.icp-link) {
        max-width: 34vw;
        overflow: hidden;
        flex: 0 1 auto;
        text-overflow: ellipsis;
    }

    .path-bar .icp-link {
        display: none;
    }
}