/* Hide the body::before badge from env.css on any page that renders
   the clickable #env-switcher badge — keeps a single visible marker. */
body:has(#env-switcher)::before {
    content: none;
}

.env-badge {
    position: fixed;
    top: 0;
    right: 0;
    font-size: calc((13/16)*1rem);
    text-align: right;
    color: #FFF;
    font-weight: 400;
    padding: 0.1rem 0.5rem;
    padding-right: 4rem;
    border-bottom-left-radius: 4px;
    z-index: 1200;
    cursor: pointer;
    user-select: none;
}

/* Badge uses env colour as the base; a small accent stripe on the
   right edge picks up the active slot's colour. */
.env-badge--green { background-color: var(--env-green-bg); color: var(--env-green-fg); }
.env-badge--blue  { background-color: var(--env-blue-bg);  color: var(--env-blue-fg); }

.env-badge--slot-alpha { box-shadow: inset -0.5rem 0 0 var(--slot-alpha-bg); }
.env-badge--slot-bravo { box-shadow: inset -0.5rem 0 0 var(--slot-bravo-bg); }

.env-switcher-popover {
    position: fixed;
    top: 1.8rem;
    right: 0.5rem;
    background: #FFF;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    z-index: 1199;
    font-size: calc((13/16)*1rem);
}

.env-switcher-popover.hide {
    display: none;
}

.env-switcher-popover__matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-width: 22rem;
}

.env-switcher-popover__col {
    display: flex;
    flex-direction: column;
}

.env-switcher-popover__col + .env-switcher-popover__col {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

/* Header row picks up the env colour. It lives inside the same <ul> as the
   slot rows so all four cells (header + alpha + bravo) share padding and
   row height — no special-case sizing. */
.env-switcher-popover__col--green .env-switcher-popover__item--header {
    background-color: var(--env-green-bg);
    color: var(--env-green-fg);
}

.env-switcher-popover__col--blue .env-switcher-popover__item--header {
    background-color: var(--env-blue-bg);
    color: var(--env-blue-fg);
}

.env-switcher-popover__item--header .env-switcher-popover__main {
    font-weight: 500;
    letter-spacing: 0.08em;
}

/* Header row has no slot indicator dot. */
.env-switcher-popover__item--header .env-switcher-popover__main::before {
    content: none;
}

.env-switcher-popover__item--header .env-switcher-popover__status {
    color: inherit;
    opacity: 0.7;
    border-left-color: rgba(255, 255, 255, 0.2);
}

.env-switcher-popover__item--header .env-switcher-popover__status:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.12);
}

.env-switcher-popover__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.env-switcher-popover__item {
    display: flex;
    align-items: stretch;
    color: #363636;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.env-switcher-popover__item:first-child {
    border-top: 0;
}

.env-switcher-popover__item a {
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 400;
}

.env-switcher-popover__main {
    display: block;
    flex: 1;
    padding: 0.65rem 0.75rem 0.65rem 1.5rem;
}

.env-switcher-popover__status {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    font-size: 0.7em;
    opacity: 0.45;
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}

.env-switcher-popover__status:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.04);
}

.env-switcher-popover__main::before {
    content: '';
    display: inline-block;
    width: 0.75rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.env-switcher-popover__item--current .env-switcher-popover__main::before {
    content: '\2190';
    width: auto;
    margin-right: 0.5rem;
    color: #444;
    font-weight: 700;
}

.env-switcher-popover__item--active .env-switcher-popover__main::before {
    --env-pulse-rgb: 34, 197, 94;
    --env-pulse-dot: #22C55E;
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.75rem;
    border-radius: 50%;
    background: var(--env-pulse-dot);
    animation: env-switcher-pulse 1.8s ease-out infinite;
}

.env-switcher-popover__item--active:hover .env-switcher-popover__main::before {
    --env-pulse-rgb: 255, 255, 255;
    --env-pulse-dot: #FFF;
}

@keyframes env-switcher-pulse {
    0%   { box-shadow: 0 0 0 0      rgba(var(--env-pulse-rgb), 0.55); }
    70%  { box-shadow: 0 0 0 0.45rem rgba(var(--env-pulse-rgb), 0); }
    100% { box-shadow: 0 0 0 0      rgba(var(--env-pulse-rgb), 0); }
}

.env-switcher-popover__since {
    display: block;
    margin-left: 1.25rem;
    margin-top: 0.15rem;
    font-size: 0.75em;
    font-weight: 300;
    color: #888;
    text-transform: none;
    letter-spacing: normal;
}

.env-switcher-popover__item:hover .env-switcher-popover__since {
    color: #FFF;
    opacity: 0.85;
}

/* Slot-tinted hover. Active-shortcut rows pick up the env colour
   instead so the bottom row visually ties to its column. */
.env-switcher-popover__item--slot-alpha:hover {
    background-color: var(--slot-alpha-bg);
    color: var(--slot-alpha-fg);
}

.env-switcher-popover__item--slot-alpha:hover .env-switcher-popover__since {
    color: var(--slot-alpha-fg);
}

.env-switcher-popover__item--slot-bravo:hover {
    background-color: var(--slot-bravo-bg);
    color: var(--slot-bravo-fg);
}

/* Highlight the cell the request is currently on with a subtle ring. */
.env-switcher-popover__item--current {
    background-color: rgba(0, 0, 0, 0.04);
    font-weight: 500;
}