/* ============================================================================
   App-wide breadcrumb bar — concept docs/concepts/KONZEPT-Breadcrumb-Navigation.{md,html}
   (variant 1A app-wide + 2A grey group nodes). Shared style, consumed by every layout.
   Colors EXCLUSIVELY via --fn-* tokens (Manifest §11 — no raw hex/rgb, not even as fallback).
   ============================================================================ */

.fn-crumbbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
    background: var(--fn-bg-alt);
}

/* Optional back arrow (left) — exactly one level up; browser-back stays untouched. */
.fn-crumb-back {
    width: 30px;
    height: 30px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--fn-border-width) solid var(--fn-border);
    border-radius: var(--fn-radius-sm);
    color: var(--fn-text-secondary);
    background: transparent;
    cursor: pointer;
    transition: background .14s, color .14s, border-color .14s;
}

.fn-crumb-back:hover {
    background: var(--fn-bg-muted);
    color: var(--fn-text);
    border-color: var(--fn-border-strong);
}

.fn-crumb-back .lucide { width: 16px; height: 16px; }

.fn-crumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap; /* long paths wrap to the next line — no horizontal scrolling */
    min-width: 0;
}

/* ---- nodes ---- */
.fn-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    border-radius: var(--fn-radius-sm);
    padding: 4px 9px;
    white-space: nowrap;
}

.fn-crumb .lucide { width: 14px; height: 14px; }

/* clickable ancestor (has a target) */
a.fn-crumb {
    color: var(--fn-text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: background .14s, color .14s;
}

a.fn-crumb:hover {
    background: var(--fn-accent-soft);
    color: var(--fn-primary);
}

a.fn-crumb.fn-crumb-home .lucide { color: var(--fn-primary); }

/* non-clickable group / intermediate node (orientation only, variant 2A) */
.fn-crumb-group {
    color: var(--fn-text-tertiary);
    cursor: default;
    font-size: 12px;
}

/* current node (end point, never a link) */
.fn-crumb-current {
    color: var(--fn-text);
    font-weight: var(--fn-font-weight-bold);
    cursor: default;
}

/* separator */
.fn-crumb-sep {
    color: var(--fn-text-tertiary);
    display: inline-flex;
    align-items: center;
}

.fn-crumb-sep .lucide { width: 14px; height: 14px; }