/* Shared, viewport-anchored botanical ornaments.  The elements are mounted
   directly under body so fixed positioning is not captured by transformed
   application panels. */
.hedera-edge-leaf {
    position: fixed;
    top: 0;
    width: clamp(64px, 30vw, 138px);
    height: min(48vh, 255px);
    pointer-events: none !important;
    user-select: none;
    opacity: .65;
    /* Above persistent app chrome (e.g. the control sidebar at z-index:100),
       while remaining below dialogs, modal backdrops, and loading overlays. */
    z-index: 110;
    background-repeat: no-repeat;
    background-size: contain;
    will-change: transform;
}
.hedera-edge-leaf.edge-left {
    left: 0;
    transform: translateY(var(--edge-left-y, 0px));
    background-image: url("../images/leaf-edge-left.png?v=3");
    background-position: left center;
}
.hedera-edge-leaf.edge-right {
    right: 0;
    transform: translateY(var(--edge-right-y, 0px));
    background-image: url("../images/leaf-edge-right.png?v=3");
    background-position: right center;
}

/* Retire only the two old side treatments once the shared pair is mounted.
   Top-of-page, hero, card, and login botanical artwork remains untouched. */
html.has-shared-edge-leaves .hub-main::before,
html.has-shared-edge-leaves .hub-main::after,
html.has-shared-edge-leaves .edge-leaf {
    display: none !important;
}

@media (max-width: 480px) {
    .hedera-edge-leaf {
        width: clamp(58px, 28vw, 102px);
        height: min(42vh, 190px);
        opacity: .5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hedera-edge-leaf {
        transition: none !important;
        animation: none !important;
    }
}