/* ==========================================================
   Planning Demo
========================================================== */

.planning-demo{
    display:flex;
    flex-direction:column;
    gap:.625rem;

    width:100%;

    padding:1.75rem;

    border:1px solid var(--sm-border);
    border-radius:1rem;

    background:#fff;

    box-shadow:var(--sm-shadow);
}


/* Header */

.planning-demo-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    margin-bottom:.25rem;
}

.planning-demo-title{
    color:var(--sm-navy);

    font-family:"Sora", sans-serif;
    font-size:.85rem;
    font-weight:600;
}

.planning-demo-open{
    color:var(--sm-warning);

    font-family:"JetBrains Mono", monospace;
    font-size:.7rem;
    font-weight:600;

    transition:
        color .3s ease,
        opacity .3s ease;
}

.planning-demo-open.is-complete{
    color:var(--sm-success);
}


/* Person rows */

.planning-demo-person{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    min-height:3.15rem;

    padding:.75rem .875rem;

    border-radius:.625rem;

    background:var(--sm-surface);

    transition:
        background-color .3s ease,
        box-shadow .3s ease;
}

.planning-demo-person.is-assigned{
    background:rgb(0 107 181 / 8%);

    box-shadow:inset 0 0 0 1px rgb(0 107 181 / 10%);
}

.planning-demo-person.has-error{
    background:rgb(232 116 59 / 7%);
}


/* Avatar */

.planning-demo-avatar{
    display:grid;
    place-items:center;

    flex:0 0 auto;

    width:1.625rem;
    height:1.625rem;

    color:#fff;

    border-radius:50%;

    background:var(--sm-primary);

    font-size:.625rem;
    font-weight:600;
}

.planning-demo-avatar-muted{
    background:#8a8fa3;
}

.planning-demo-name{
    color:var(--sm-navy);

    font-size:.85rem;
    font-weight:500;
}


/* Status */

.planning-demo-status{
    flex:0 0 auto;

    color:var(--sm-success);

    font-family:"JetBrains Mono", monospace;
    font-size:.68rem;
    font-weight:600;

    white-space:nowrap;

    transition:
        color .3s ease,
        opacity .3s ease,
        transform .3s ease;
}

.planning-demo-status.is-assigned{
    display:inline-flex;
    align-items:center;
    gap:.3rem;

    color:var(--sm-primary);
}

.planning-demo-status.is-error{
    color:#c64b4b;
}


/* Checks */

.planning-demo-checks{
    display:flex;
    flex-direction:column;
    gap:.5rem;

    margin-top:auto;
    padding:.75rem .875rem;

    border-radius:.625rem;

    background:rgb(0 107 181 / 8%);
}

.planning-demo-check{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    color:var(--sm-text);

    font-size:.8rem;
    font-weight:500;
}

.planning-demo-check-status{
    padding:.2rem .5rem;

    color:rgb(3 19 46 / 35%);

    border-radius:.375rem;

    background:var(--sm-surface);

    font-family:"JetBrains Mono", monospace;
    font-size:.65rem;
    font-weight:600;

    transition:
        color .3s ease,
        background-color .3s ease;
}

.planning-demo-check-status.is-complete{
    color:var(--sm-success);

    background:rgb(78 155 111 / 12%);
}


/* Visual CTA */

.planning-demo-action{
    padding:.7rem 1rem;

    color:#fff;

    border-radius:.625rem;

    background:var(--sm-primary);

    text-align:center;

    font-size:.8rem;
    font-weight:600;

    user-select:none;
    pointer-events:none;

    transition:
        background-color .3s ease,
        box-shadow .3s ease;
}

.planning-demo-action.is-running{
    box-shadow:0 0 0 3px rgb(0 107 181 / 15%);
}

.planning-demo-action.is-complete{
    background:var(--sm-success);
}


/* Mobile */

@media (max-width:575.98px){

    .planning-demo{
        padding:1rem;
    }

    .planning-demo-header{
        align-items:flex-start;
    }

    .planning-demo-person{
        align-items:flex-start;
    }

    .planning-demo-status{
        font-size:.6rem;
    }

    .planning-demo-check{
        align-items:flex-start;
    }

}