/*
    Couple share bar (Components/Shared/CoupleShareBar.razor): the Account Snapshot look from the mobile app. You in blue,
    your partner in amber, meeting in a 40px horizontal blend that lifts to the lighter tints at the seam
    (blue -> light blue -> gold -> amber at 0 / 42 / 58 / 100% of the blend, the mobile SnapshotShareBlendBrush).
    Same colors in both themes. The host sets the height and radius; the bar fills it.
*/
@property --ci-couple-share {
    syntax: '<number>';
    inherits: true;
    initial-value: 50;
}

:root {
    --ci-couple-user: #2563EB;
    --ci-couple-user-tint: #60A5FA;
    --ci-couple-partner-tint: #FBBF24;
    --ci-couple-partner: #D97706;
    --ci-couple-blend: 40px;
}

.ci-couple-bar {
    --ci-couple-seam: calc(var(--ci-couple-share) * 1%);
    display: block;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 4px;
    border-radius: inherit;
    background: linear-gradient(90deg,
        var(--ci-couple-user) 0%,
        var(--ci-couple-user) calc(var(--ci-couple-seam) - var(--ci-couple-blend) * .5),
        var(--ci-couple-user-tint) calc(var(--ci-couple-seam) - var(--ci-couple-blend) * .08),
        var(--ci-couple-partner-tint) calc(var(--ci-couple-seam) + var(--ci-couple-blend) * .08),
        var(--ci-couple-partner) calc(var(--ci-couple-seam) + var(--ci-couple-blend) * .5),
        var(--ci-couple-partner) 100%);
    transition: --ci-couple-share .45s cubic-bezier(.2, .8, .2, 1);
}

.ci-couple-bar.is-user-only { background: var(--ci-couple-user); }
.ci-couple-bar.is-partner-only { background: var(--ci-couple-partner); }
.ci-couple-bar.is-empty { background: transparent; }

@media (prefers-reduced-motion: reduce) {
    .ci-couple-bar { transition: none; }
}