/* Feature gating: what a plan does not include, shown and explained (feature_gating.js). */

/* A locked button stays where it is, faded, so the page shows what the other plans do (Matthijs,
   site review, round 3, S3), but its label stays readable. At 0.75 every button style passes AA
   (4.5:1) for its label, in light and dark: worst .btn-danger 4.57:1, .btn-primary 4.92:1 and
   .btn-ghost 4.94:1 on white; .btn-ghost 6.38:1 on stone-800. It was 0.5 (2.6:1, and 0.4 in dark
   mode), grayed by a filter, and a gray-on-gray override (2.5:1 before any fade). The lock
   itself is an SVG inside the button (feature_gating.js), not a corner image drawn here. */
.feature-disabled {
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.feature-locked {
    cursor: pointer !important;
    user-select: none;
}

.feature-locked:hover,
.feature-locked:focus-visible {
    opacity: 0.9;
}

/* The step bar has its own muted colors and lock (main.css, _step_bar.html): no second fade. */
.step.feature-disabled {
    opacity: 1;
}

/* The plan badge in the account menu: neutral, whatever the plan (decision 3, 2026-09-25; site
   review S2: the Standard badge was green, Basic blue). */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.625rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: #f5f5f4;   /* stone-100 */
    color: #44403c;              /* stone-700 */
}

.dark .tier-badge {
    background-color: #44403c;
    color: #e7e5e4;
}

/* The upgrade dialog */
.feature-upgrade-modal {
    backdrop-filter: blur(5px);
}

.feature-upgrade-modal .card {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(1);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.feature-upgrade-modal:not(.hidden) .card {
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .feature-upgrade-modal:not(.hidden) .card { animation: none; }
}

@media (max-width: 640px) {
    .feature-upgrade-modal .card {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }

    .feature-upgrade-modal .btn-primary,
    .feature-upgrade-modal .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}