/*
    Blended bars: every progress / two-color bar in the signed-in app fades where its colors meet, the web twin of the
    mobile BlendBarView / BlendBarPainter. A seam is a short horizontal gradient (--ci-blend, 32px, centred on the
    seam) that is never wider than half of either neighbour, so thin segments keep their own color. Where a fill
    meets an empty remainder the fill fades out over the track behind it. A full bar has no seam and no fade.

    Two mechanisms:
    1. Components/Shared/BlendBar.razor paints one element with a computed gradient (--ci-blend-fill). Used where a
       bar has several colors side by side (recurring mix, net worth stack, retirement tax mix, growth split,
       budget fill + over + projected), because only a single gradient can blend neighbour into neighbour.
    2. Existing single-fill bars (a fill element sized by an inline width inside a track) keep their markup and get
       a mask that fades the last min(--ci-blend, 50%) of the fill into the track. The 100% exemptions below keep a
       full bar solid, the same as the painter drawing no seam when nothing is left.
*/
:root { --ci-blend: 32px; }

.ci-blend-bar {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 4px;
    border-radius: inherit;
    background: var(--ci-blend-fill, transparent);
}

/* Single-fill bars that keep their markup: the fill fades into the track over its last stretch. */
.rc-bar-fill,
.lb-share-fill,
.lb-csp-fill,
.fin-bud-fill,
.fin-ret-egg-fill,
.ivd-share-fill,
.ivk-range-fill,
.ivs-range-fill,
.iv-bar-fill,
.rp-bench-fill,
.rp-breakdown-fill,
.rp-fair-fill,
.rp-hbar-fill,
.rp-pace-fill,
.rp-budget-fill,
.bg-track-fill,
.bg-bucket-fill,
.bg-period-fill,
.rpb-bullet-fill,
.dbx-debt-bar,
.nw-ov-side-bar,
.adu-batch-bar,
.ai-rank-bar,
.rp-rhythm-track > span,
.rp-source-share > span {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - min(var(--ci-blend), 50%)), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - min(var(--ci-blend), 50%)), transparent 100%);
}

/* A full bar meets nothing: no fade (the inline width the pages render is "width:100%" or "width: 100%"). */
.rc-bar-fill[style*="width:100%"], .rc-bar-fill[style*="width: 100%"],
.lb-share-fill[style*="width:100%"], .lb-share-fill[style*="width: 100%"],
.lb-csp-fill[style*="width:100%"], .lb-csp-fill[style*="width: 100%"],
.fin-bud-fill[style*="width:100%"], .fin-bud-fill[style*="width: 100%"],
.fin-ret-egg-fill[style*="width:100%"], .fin-ret-egg-fill[style*="width: 100%"],
.ivd-share-fill[style*="width:100%"], .ivd-share-fill[style*="width: 100%"],
.ivk-range-fill[style*="width:100%"], .ivk-range-fill[style*="width: 100%"],
.ivs-range-fill[style*="width:100%"], .ivs-range-fill[style*="width: 100%"],
.iv-bar-fill[style*="width:100%"], .iv-bar-fill[style*="width: 100%"],
.rp-bench-fill[style*="width:100%"], .rp-bench-fill[style*="width: 100%"],
.rp-breakdown-fill[style*="width:100%"], .rp-breakdown-fill[style*="width: 100%"],
.rp-fair-fill[style*="width:100%"], .rp-fair-fill[style*="width: 100%"],
.rp-hbar-fill[style*="width:100%"], .rp-hbar-fill[style*="width: 100%"],
.rp-pace-fill[style*="width:100%"], .rp-pace-fill[style*="width: 100%"],
.rp-budget-fill[style*="width:100%"], .rp-budget-fill[style*="width: 100%"],
.bg-track-fill[style*="width:100%"], .bg-track-fill[style*="width: 100%"],
.bg-bucket-fill[style*="width:100%"], .bg-bucket-fill[style*="width: 100%"],
.bg-period-fill[style*="width:100%"], .bg-period-fill[style*="width: 100%"],
.rpb-bullet-fill[style*="width:100%"], .rpb-bullet-fill[style*="width: 100%"],
.dbx-debt-bar[style*="width:100%"], .dbx-debt-bar[style*="width: 100%"],
.nw-ov-side-bar[style*="width:100%"], .nw-ov-side-bar[style*="width: 100%"],
.adu-batch-bar[style*="width:100%"], .adu-batch-bar[style*="width: 100%"],
.ai-rank-bar[style*="width:100%"], .ai-rank-bar[style*="width: 100%"],
.rp-rhythm-track > span[style*="width:100%"], .rp-rhythm-track > span[style*="width: 100%"],
.rp-source-share > span[style*="width:100%"], .rp-source-share > span[style*="width: 100%"] {
    -webkit-mask-image: none;
    mask-image: none;
}

/* Reduce motion / print: the blend is static already; nothing to switch off. */