/* Reusable status treatment for interactive previews and planned features. */
.atlas-coming-soon{
    position:relative;
    isolation:isolate;
}

.atlas-coming-soon::after{
    content:attr(data-coming-soon-label);
    position:absolute;
    z-index:8;
    pointer-events:none;
    color:#79e7a9;
    border:1px solid rgba(66,211,146,.5);
    background:rgba(11,24,22,.88);
    font-size:10px;
    font-weight:800;
    letter-spacing:1.1px;
    line-height:1;
    white-space:nowrap;
    box-shadow:none;
}

.atlas-coming-soon-card::after{
    top:50%;
    left:50%;
    padding:8px 14px;
    border-radius:999px;
    transform:translate(-50%,-50%) rotate(25deg);
}

.atlas-coming-soon-control::after{
    top:7px;
    right:7px;
    padding:5px 7px;
    border-radius:7px;
    font-size:8px;
    letter-spacing:.7px;
}

.atlas-coming-soon-card:hover::after,
.atlas-coming-soon-control:hover::after{
    color:#a3f2c5;
    border-color:rgba(66,211,146,.75);
}

.collection-card[role="button"]:focus-visible{
    outline:2px solid rgba(var(--workspace-accent-rgb),.72);
    outline-offset:3px;
}

.workspace-coming-soon-badge{
    margin-left:auto!important;
    padding:4px 6px;
    border:1px solid rgba(66,211,146,.42);
    border-radius:999px;
    background:rgba(66,211,146,.09);
    color:#79e7a9!important;
    font-size:8px!important;
    font-weight:800;
    letter-spacing:.55px;
    line-height:1!important;
    white-space:nowrap;
}

.workspace-nav-section button.workspace-coming-soon:hover .workspace-coming-soon-badge,
.workspace-nav-section button.workspace-coming-soon.active .workspace-coming-soon-badge{
    border-color:rgba(66,211,146,.68);
    background:rgba(66,211,146,.14);
}

.workspace-rail-coming-soon::after{
    content:"SOON";
    position:absolute;
    top:2px;
    right:1px;
    padding:2px 3px;
    border:1px solid rgba(66,211,146,.5);
    border-radius:5px;
    background:#14221d;
    color:#79e7a9;
    font-size:6px;
    font-weight:800;
    letter-spacing:.25px;
    line-height:1;
    pointer-events:none;
}

.workspace-settings-future-grid article > span{
    color:#79e7a9;
    border-color:rgba(66,211,146,.42);
    background:rgba(66,211,146,.08);
}

@media (max-width:760px){
    .workspace-coming-soon-badge{ font-size:7px!important; }
    .atlas-coming-soon-card::after{ padding:7px 10px; font-size:9px; }
}

@media (prefers-reduced-motion:reduce){
    .atlas-coming-soon::after{ transition:none!important; }
}