/* W6-S1 — use-door face panel.
 *
 * One fixed-size stage in the use-entry hero holds both faces of the
 * tenant: the static avatar (the permanent fallback) and, when the
 * package applies, the mounted <netshow-alive>. Fixed dimensions mean
 * the swap is layout-shift-free at every width. Tokens resolve through
 * design-system.css / ui-kit.css, both already on the page. */

.nsk-use-face {
    position: relative;
    flex: 0 0 auto;
    width: 280px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nsk-use-face .nsk-avatar {
    margin: 0;
}

.nsk-use-face .nsk-avatar[hidden] {
    display: none;
}

.nsk-alive-mount {
    position: absolute;
    inset: 0;
}

.nsk-alive-mount[hidden] {
    display: none;
}

.nsk-alive-mount netshow-alive {
    display: block;
    width: 100%;
    height: 100%;
}

/* Print: never leave a blank stage — drop the live mount, restore the
   static avatar even if the face had hidden it. */
@media print {
    .nsk-alive-mount { display: none !important; }
    .nsk-use-face .nsk-avatar[hidden] { display: inline-flex !important; }
}

/* 375-class screens: the hero stacks and the stage narrows with it.
   639.98px shares the seam agent-profile-nsk.css already uses. */
@media (max-width: 639.98px) {
    .nsk-use-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .nsk-use-hero .nsk-mp-card-has {
        justify-content: center;
    }

    .nsk-use-face {
        width: 224px;
        height: 192px;
    }
}