/* Staff inline visibility toggle. Injected by ui_visibility.js onto any
   [data-ui-key] host so a staff user can hide that element from end users.
   Global, domain-agnostic — never style page-specific elements here. */

.ui-hide-toggle {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--on-surface-variant);
    outline: 1px solid var(--te-border);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.65;
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.ui-hide-toggle:hover,
.ui-hide-toggle:focus-visible {
    opacity: 1;
}

/* Active state: the element is currently hidden from end users. */
.ui-hide-toggle--hidden {
    background: var(--primary-container);
    color: var(--on-primary);
    outline: none;
    opacity: 1;
}

/* Inline variant for tab buttons (placed as a sibling in the tab strip, not
   absolutely positioned over card content). */
.ui-hide-toggle--inline {
    position: static;
    top: auto;
    right: auto;
    align-self: center;
    margin-left: 2px;
}

/* Anchor the absolutely-positioned corner pill without a per-host getComputedStyle
   read in ui_visibility.js (reading layout per host thrashed style/layout on scan).
   Staff-only; tab buttons use the inline pill and tabpanels get no pill, so both
   are excluded. Inert for end users — gated on body.is-staff. */
body.is-staff [data-ui-key]:not(.tactical-nav__tab):not([role="tabpanel"]) {
    position: relative;
}

/* Staff-only affordance: dim a host the staff user has hidden from users, so
   they can tell at a glance it is hidden (they still see it; end users don't).
   Outline (not border) avoids any layout shift. */
.ui-previewing-hidden {
    opacity: 0.5;
    outline: 1px dashed var(--outline);
    outline-offset: 4px;
}

/* Defense in depth: the pill must never be visible to non-staff even if the
   injecting script somehow ran for them. */
body:not(.is-staff) .ui-hide-toggle {
    display: none !important;
}