/* ============================================================
   Components — MS_site
   Anatomy per design-system.md §7
   ============================================================ */

[x-cloak] { display: none !important; }

/* ---------- Card (base) ---------- */
.card {
    border-radius: var(--r-lg);
    background: var(--surface-glass);
    border: 1px solid var(--border);
    box-shadow:
        var(--shadow-sm),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    padding: var(--space-4);
    transition:
        transform var(--dur) var(--ease-standard),
        box-shadow var(--dur) var(--ease-standard),
        border-color var(--dur) var(--ease-standard);
}

.card--visual {
    background: var(--surface-glass-lite);
}

.card--clickable:hover,
a.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg), var(--glow-accent);
    border-color: var(--border-strong);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: var(--r-md);
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-standard),
        box-shadow var(--dur-fast) var(--ease-standard),
        transform var(--dur-fast) var(--ease-standard);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

/* Sizes */
.btn--sm {
    height: 32px;
    padding-inline: var(--space-3);
    font-size: var(--fs-sm);
}

.btn--md {
    height: 40px;
    padding-inline: var(--space-4);
    font-size: var(--fs-base);
}

.btn--lg {
    height: 48px;
    padding-inline: var(--space-5);
    font-size: var(--fs-base);
}

/* Variants */
.btn-accent {
    background: var(--grad-accent);
    color: var(--text-on-accent);
}

.btn-accent:hover {
    box-shadow: var(--glow-accent);
}

.btn-accent:active {
    transform: translateY(1px);
}

.btn-soft {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-soft:hover {
    background: var(--surface-3);
    border-color: var(--border-strong);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text);
}

.btn-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    padding: 2px 10px;
    white-space: nowrap;
}

.badge-live {
    background: var(--live-weak);
    color: var(--live);
}

.badge-live .dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: currentColor;
    animation: live-pulse 1.6s var(--ease-standard) infinite;
}

.badge-soft {
    background: var(--surface-2);
    color: var(--text-muted);
}

.badge-accent {
    background: var(--accent-weak);
    color: var(--accent);
}

/* ---------- Live pulse animation ---------- */
@keyframes live-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 var(--live-weak);
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
    }
}

/* ---------- Chips / Tags ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--r-sm);
    font-size: var(--fs-xs);
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 2px 8px;
    white-space: nowrap;
}

.chip--active {
    background: var(--accent-weak);
    color: var(--accent);
}

/* ---------- Grid (auto-fill) ---------- */
.grid-auto {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(var(--min, 220px), 1fr));
}

@media (max-width: 768px) {
    .grid-auto {
        gap: var(--space-4);
    }
}

/* ---------- Tabs ---------- */
.tabs {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: var(--r-full);
    padding: 4px;
    gap: 2px;
}

.tabs .tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    cursor: pointer;
    transition:
        background var(--dur-fast) var(--ease-standard),
        color var(--dur-fast) var(--ease-standard);
}

.tabs .tab--active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-sm);
}