/* ============================================================================
 * shared/auth-flow/style.css
 * ---------------------------------------------------------------------------
 * Module-specific sizing for the Teleport SSO auth-flow diagram.
 * Role colors + state classes are inherited from zen components (zen-box,
 * zen-term, zen-label). This file only tunes dimensions and the terminal
 * layout.
 *
 * Reusability: when this module is embedded inline into a host scenario
 * (e.g. slides/uc1-alice/), scope all selectors with
 * `.auth-flow-scope` so they don't leak into the host's styles.
 * ========================================================================== */

/* When used standalone the scope is implicit = whole scene. For embedded use
 * the host wraps actors in `<div class="zen-scope auth-flow-scope">`. Both
 * variants read the same selectors below. */

.auth-flow-scope #af-user     { width: 13%; }
.auth-flow-scope #af-proxy    { width: 15%; }
.auth-flow-scope #af-idp      { width: 14%; }
.auth-flow-scope #af-auth     { width: 15%; }
.auth-flow-scope #af-resource { width: 13%; }

/* Standalone fallback — when not wrapped in a scope. */
#af-user     { width: 13%; }
#af-proxy    { width: 15%; }
#af-idp      { width: 14%; }
#af-auth     { width: 15%; }
#af-resource { width: 13%; }

/* Terminal below the user box. */
#af-term {
    width: 28%;
    height: 18%;
}

/* Chips — a touch bolder than the default protocol label. */
.auth-flow-scope .zen-label--chip,
#auth-flow-root   .zen-label--chip {
    font-size: 0.72rem;
    font-weight: 700;
}