/* Dev/preview tool: a thin bar for switching between homepage layout
   variants while reviewing. Not part of the shipped brand experience —
   see REVISIONS.md. */

#versionBar {
    position: fixed; top: 0; left: 0; right: 0;
    height: var(--versionbar-h, 34px);
    z-index: 999;
    background: #050506;
    border-bottom: 1px solid rgba(240, 240, 240, 0.12);
    font-family: var(--font-display, sans-serif);
}

.vbar-inner {
    height: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(12px, 3vw, 24px);
    gap: 12px;
}

.vbar-current {
    display: flex; align-items: center; gap: 10px;
    color: var(--pinn-muted);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
}
.vbar-tag {
    flex-shrink: 0;
    background: var(--pinn-primary); color: #fff;
    padding: 2px 6px;
    font-weight: 700; font-size: 0.62rem; letter-spacing: 0.06em;
}
.vbar-label { color: var(--pinn-accent); font-weight: 600; }
.vbar-date { opacity: 0.65; }

.vbar-links { display: flex; gap: 2px; }
.vbar-links a {
    color: var(--pinn-muted); text-decoration: none;
    font-size: 0.66rem; letter-spacing: 0.04em;
    padding: 7px 10px;
    border: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.vbar-links a:hover { color: var(--pinn-accent); }
.vbar-links a.is-active { color: var(--pinn-accent); border-color: rgba(240, 240, 240, 0.25); }

@media (max-width: 640px) {
    .vbar-date, .vbar-label { display: none; }
}