/* OPUS5-L14 — the anchor doors' face stage (/meet, /meet/{anchor}).
 *
 * Twin of homepage-alive.css (F1): one fixed-size stage holds both faces of a
 * host — the static portrait (the permanent fallback, painted by the server)
 * and, when the package applies, the mounted <netshow-alive>. Fixed dimensions
 * mean the swap is layout-shift-free at every width.
 *
 * Tokens are the door's own --meet-* set (declared on .meet in the views),
 * which resolve through design-system.css's --ns-* family. ui-kit.css is
 * deliberately NOT loaded: these doors carry their own scoped block, and a kit
 * import would restyle the whole page for a 300px stage.
 *
 * The stage is sized in a custom property so one rule serves both doors: the
 * pair door runs two 232px stages side by side, the single door one at 300px.
 */

.meet-face {
    position: relative;
    flex: 0 0 auto;
    width: var(--meet-face-size, 300px);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.meet-face-still,
.meet-face-mount {
    display: block;
    width: var(--meet-face-size, 300px);
    height: var(--meet-face-size, 300px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--meet-border-strong, #525252);
    background: var(--meet-surface, #2f3437);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.meet-face-still img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* The photographs are head-and-shoulders with headroom; 22% pulls the eyes
       onto the stage's own horizon, matching the front door's framing so the
       same host reads the same on both surfaces. */
    object-position: 50% 22%;
}

/* the live face takes the stage the static portrait was holding */
.meet-face-mount {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* No yielded state, by design. The front door hides its portrait the moment
   the element reports the package applied — but the element fires that event
   before the ~1.8 MB base image has painted, so hiding there trades a good
   photograph for an empty dark square for the length of that fetch. Here the
   portrait simply stays underneath: the mount covers it exactly, so there is
   nothing to see once the face arrives, and something worth seeing until then.
   meet-alive.js marks the portrait aria-hidden on settle so the mounted face's
   aria-label stays the single announcement. */

.meet-face-mount[hidden] {
    display: none;
}

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

.meet-face-cap {
    margin-top: 12px;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--meet-text-mute, #6b7280);
}

/* Print: never leave a blank stage — drop the live mount and let the portrait,
   which was underneath the whole time, be what prints. */
@media print {
    .meet-face-mount { display: none !important; }
}

/* ── stacked widths ─────────────────────────────────────────────────────── */

@media (max-width: 1023.98px) {
    .meet-face { --meet-face-size: 232px; }
}

/* 375-class: the stage gives ground before the copy does, and the figure goes
   full width so the caption is not bound to the 200px stage — at the stage's
   own width "Mrs. NetShow · NetShow Alive" breaks onto a second line. The
   stage stays a fixed square, centred in the wider figure. */
@media (max-width: 767.98px) {
    .meet-face {
        --meet-face-size: 200px;
        width: 100%;
    }

    .meet-face-still,
    .meet-face-mount {
        width: 200px;
        height: 200px;
    }
}