/* ============================================================
 * user_ui — Impersonation banner chrome (Phase 7 Package MM / 7.39).
 * ============================================================
 *
 * Persistent top-of-page bar shown only while an admin is
 * impersonating the current user. Structurally mirrors the
 * Package J banned/frozen banner (`.site-banner`) but uses its
 * own `.impersonation-*` namespace so the two never collide and
 * can stack (account-state banner + impersonation banner).
 *
 * Theme-invariant: like the account-state banner, the accent
 * background is hardcoded (a deep indigo, distinct from the red
 * ban / amber freeze accents), so the inverted CTA text colour
 * is hardcoded too rather than resolved from theme tokens.
 *
 * Loaded by base.html after banner/banner.css.
 * ============================================================ */

.impersonation-bar {
    width: 100%;
    border-bottom: 1px solid #3730A3; /* indigo 800 */
    background: #4338CA;              /* indigo 700 */
    color: #fff;
}

.impersonation-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
}

.impersonation-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #fff;
}

.impersonation-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.impersonation-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    color: #fff;
}

.impersonation-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
}

.impersonation-text strong {
    color: #fff;
    font-weight: 700;
}

/* Countdown pass — live MM:SS remaining, rendered by the partial's
   inline expiry script inside the "Active until" sentence. Tabular
   digits so the ticking seconds don't jitter the line width. */
.impersonation-countdown {
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* The exit form wraps the button only — keep it inline + flush. */
.impersonation-exit-form {
    flex-shrink: 0;
    margin: 0;
}

/* Inverted CTA: white background, indigo text — theme-invariant,
   same rationale as the account-state banner CTA. */
.impersonation-exit {
    background: #fff;
    border: 0;
    color: #4338CA;              /* indigo 700 */
}
.impersonation-exit:hover {
    background: #F3F4F6;         /* theme-invariant light grey */
}
.impersonation-exit:focus-visible {
    outline: 2px solid #3730A3; /* indigo 800 — visible on the bar */
    outline-offset: 2px;
}

/* Mobile — stack content + exit; full-width button. */
@media (max-width: 600px) {
    .impersonation-row {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 14px;
    }
    .impersonation-icon {
        margin-top: 2px;
    }
    .impersonation-content {
        flex-basis: calc(100% - 34px);
    }
    .impersonation-exit-form {
        flex-basis: 100%;
    }
    .impersonation-exit {
        width: 100%;
        text-align: center;
    }
}