/* ====================================================================
   PRETTY BORDERS - Strong accent center fade (0.3 → 1.0 → 0.3)
   Higher opacity peak than standard accent fades
   ==================================================================== */

/* Vertical borders (left/right) - 70% height, centered */
.io-pretty-border-left {
    position: relative;
}

.io-pretty-border-left::before {
    content: '';
    position: absolute;
    left: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--io-border-accent-fade-base), 0.3) 15%,
        rgba(var(--io-border-accent-fade-base), 1.0) 50%,
        rgba(var(--io-border-accent-fade-base), 0.3) 85%,
        transparent 100%
    );
    pointer-events: none;
}

.io-pretty-border-right {
    position: relative;
}

.io-pretty-border-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(var(--io-border-accent-fade-base), 0.3) 15%,
        rgba(var(--io-border-accent-fade-base), 1.0) 50%,
        rgba(var(--io-border-accent-fade-base), 0.3) 85%,
        transparent 100%
    );
    pointer-events: none;
}

/* Horizontal borders (top/bottom) - 70% width, left-aligned */
.io-pretty-border-top {
    position: relative;
}
.io-pretty-border-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;      /* 15% margin on left */
    right: 15%;     /* 15% margin on right */
    height: 1px;
    /* OR: left: 15%; width: 70%; */
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--io-border-accent-fade-base), 0.3) 15%,
        rgba(var(--io-border-accent-fade-base), 1.0) 50%,
        rgba(var(--io-border-accent-fade-base), 0.3) 85%,
        transparent 100%
    );
    pointer-events: none;
}

.io-pretty-border-bottom {
    position: relative;
}

.io-pretty-border-bottom::after {
     content: '';
    position: absolute;
    bottom: 0;
    left: 15%;  /* Start at 15% instead of 0 */
    width: 70%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(var(--io-border-accent-fade-base), 0.3) 15%,
        rgba(var(--io-border-accent-fade-base), 1.0) 50%,
        rgba(var(--io-border-accent-fade-base), 0.3) 85%,
        transparent 100%
    );
    pointer-events: none;
}