/* Tier-locked tab: the real UI stays visible (dimmed + blurred) so the
   user can see what's behind the gate, with a floating placard on top.
   `.tab-locked-dim` carries the `inert` attribute from JS so keyboard,
   screen readers, and pointer events skip the dimmed layer entirely.

   Extracted from style.css into features/ as part of the Alpine
   migration cleanup (KL-122). The JS stays imperative — the lock
   state is effectively static for the session and converting to
   Alpine would regress the LOCKS config object readability. */
@layer features {

/* KL-123 fix: keep .tab-panel's default position: absolute + inset: 0
   so the panel stays viewport-sized — the placard inside is absolutely
   positioned with top: 50% and we want that to resolve to 50% of the
   visible viewport, NOT 50% of overflow content (the previous
   `position: relative` override killed inset: 0 and let the panel grow
   to its content height — top:50% then landed offscreen-low on tall
   panels like MIDI). overflow: hidden clips the dim content so its
   absolutely-positioned descendants (the placard) don't scroll out
   of view either. */
.tab-locked { overflow: hidden; }
.tab-locked-dim {
    opacity: 0.25;
    filter: blur(2px) saturate(0.7);
    pointer-events: none;
    user-select: none;
}
.tab-locked-placard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100% - 2rem));
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 0.75rem;
    padding: 1.75rem 1.5rem 1.5rem;
    text-align: center;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(180, 140, 255, 0.25);
    z-index: 10;
}
.tab-locked-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 0.75rem;
}
.tab-locked-title {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.tab-locked-desc {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.tab-locked-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.tab-locked-cta {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    background: var(--accent);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: filter 0.15s, transform 0.15s;
}
.tab-locked-cta:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tab-locked-secondary {
    display: block;
    font-size: 0.75rem;
    color: var(--text-dim);
    text-decoration: none;
}
.tab-locked-secondary:hover { color: var(--accent); }

} /* end @layer features */
