/* Consumes design tokens from css/tokens.css */

.tab-btn {
    padding: 0.5rem 0.625rem;    /* tighter horizontal — vertical floor via min-height */
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-size: 0.8125rem;        /* 13px — slightly tighter than 14.4px */
    letter-spacing: -0.005em;
    white-space: nowrap;         /* prevent wrapping in horizontal-scroll tab strip */
    flex: 0 0 auto;
    min-height: 44px;            /* explicit floor for WCAG 2.5.5 touch target */
}
.tab-btn:focus { outline: none; }
.tab-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
    border-radius: 2px;
}

#tabs {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}
#tabs::-webkit-scrollbar { height: 4px; }
#tabs::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; }
.tab-btn:hover { color: var(--color-text-primary); }
.tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.sota-table { width: 100%; border-collapse: collapse; }
.sota-table th, .sota-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
.sota-table th {
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.sota-table th.sortable:hover { color: var(--color-text-primary); }
.sota-table th .sort-arrow { margin-left: var(--space-1); font-size: 0.65rem; color: var(--color-accent); }
.sota-table th .sort-arrow.desc::after { content: "\25BC"; }
.sota-table th .sort-arrow.asc::after { content: "\25B2"; }
.sota-table tr:hover { background: var(--color-bg-surface); }

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-sota { background: var(--color-sota-bg); color: var(--color-sota-fg); }
.badge-new { background: var(--color-new-bg); color: var(--color-new-fg); }
.badge-proprietary { background: var(--color-proprietary-bg); color: var(--color-proprietary-fg); }
.badge-open-weight { background: var(--color-open-weight-bg); color: var(--color-open-weight-fg); }
.badge-open-source { background: var(--color-open-source-bg); color: var(--color-open-source-fg); }

.change-card {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    margin-bottom: var(--space-2);
    background: var(--color-bg-surface);
    border-radius: var(--radius-md);
}
.cmp-table { border-collapse: collapse; min-width: 100%; }
.cmp-table th, .cmp-table td {
    padding: 0.4rem 0.7rem;
    text-align: center;
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    white-space: nowrap;
}
.cmp-table th { background: var(--color-bg-surface); color: var(--color-text-muted); font-weight: 600; }
.cmp-table th.row-header { text-align: left; min-width: 140px; }
.cmp-table td.best { background: var(--color-best-bg); color: var(--color-best-fg); font-weight: 700; }
.cmp-table td.worst { background: var(--color-worst-bg); color: var(--color-worst-fg); }
.cmp-table td.na { color: var(--color-text-disabled); }
.cmp-table tr:hover { background: var(--color-bg-sunken); }

.leaderboard-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
}

/* ===== Motion ==========================================================
   Three intentional motions only:
   1. Tab activation — already handled by .tab-btn transition (color only).
   2. Modal enter/exit — fade + light scale, 160ms.
   3. Tabpanel enter — 120ms fade so tab-switch isn't a jarring swap.
   All motion scoped to specific properties; `prefers-reduced-motion: reduce`
   collapses every duration to 1ms so users who opt out get instant state
   changes. */
#modal-overlay {
    opacity: 0;
    transition: opacity 160ms ease-out;
}
#modal-overlay:not(.hidden) { opacity: 1; }
#modal-overlay > [role="dialog"] {
    transform: scale(0.98);
    transition: transform 160ms ease-out;
}
#modal-overlay:not(.hidden) > [role="dialog"] { transform: scale(1); }

.tab-content {
    animation: tabpanel-enter 120ms ease-out;
}
@keyframes tabpanel-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

/* Light theme — opt-in via .theme-light on <html> */
.theme-light {
    color-scheme: light;
}
.theme-light .bg-gray-900 { background-color: #f3f4f6 !important; }
.theme-light .bg-gray-800 { background-color: #e5e7eb !important; }
.theme-light .bg-gray-950 { background-color: #f9fafb !important; }
.theme-light .text-gray-100 { color: #111827 !important; }
.theme-light .text-gray-200 { color: #1f2937 !important; }
.theme-light .text-gray-300 { color: #374151 !important; }
.theme-light .text-gray-400 { color: #4b5563 !important; }
.theme-light .text-gray-500 { color: #6b7280 !important; }
.theme-light .border-gray-700 { border-color: #d1d5db !important; }
.theme-light .border-gray-800 { border-color: #e5e7eb !important; }

/* Additional light theme overrides — extend existing block */
.theme-light .bg-gray-700 { background-color: #f3f4f6 !important; }
.theme-light .bg-gray-600 { background-color: #d1d5db !important; }

.theme-light .hover\:bg-gray-800:hover { background-color: #e5e7eb !important; }
.theme-light .hover\:bg-gray-700:hover { background-color: #d1d5db !important; }
.theme-light .hover\:bg-gray-600:hover { background-color: #9ca3af !important; }

.theme-light .text-blue-400 { color: #1d4ed8 !important; }
.theme-light .text-blue-300 { color: #2563eb !important; }
.theme-light .text-green-400 { color: #047857 !important; }
.theme-light .text-red-400 { color: #b91c1c !important; }
.theme-light .text-yellow-300 { color: #ca8a04 !important; }
.theme-light .text-yellow-400 { color: #b45309 !important; }
.theme-light .text-purple-200 { color: #6b21a8 !important; }

/* Status badges */
.theme-light .bg-green-900 { background-color: #d1fae5 !important; }
.theme-light .bg-red-900 { background-color: #fee2e2 !important; }
.theme-light .bg-yellow-900 { background-color: #fef3c7 !important; }
.theme-light .bg-blue-900 { background-color: #dbeafe !important; }
.theme-light .bg-purple-900 { background-color: #f3e8ff !important; }
.theme-light .bg-cyan-900 { background-color: #cffafe !important; }
.theme-light .bg-pink-900 { background-color: #fce7f3 !important; }
.theme-light .text-green-300 { color: #047857 !important; }
.theme-light .text-red-300 { color: #b91c1c !important; }
.theme-light .text-blue-200 { color: #2563eb !important; }
.theme-light .text-purple-200 { color: #6b21a8 !important; }
.theme-light .text-cyan-200 { color: #0e7490 !important; }
.theme-light .text-pink-200 { color: #be185d !important; }

/* Input/form controls */
.theme-light input,
.theme-light select,
.theme-light textarea {
    background-color: #fff !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}

/* Tables */
.theme-light table { color: #1f2937; }
.theme-light .border-b.border-gray-700 { border-color: #d1d5db !important; }
.theme-light .border-b.border-gray-800 { border-color: #e5e7eb !important; }

/* Modal overlay opacity */
.theme-light #modal-overlay { background-color: rgba(0, 0, 0, 0.4) !important; }

/* Token colors for code/monospace */
.theme-light .font-mono { color: #1f2937; }

/* Scoreboard rank bg */
.theme-light .bg-gray-950 { background-color: #f9fafb !important; }

/* Price tab — 2D/3D toggle and 3D explorer HUD */
.p3d-tab { padding: 4px 12px; border-radius: 8px; border: 1px solid #374151; background: #111827; color: #d1d5db; font-size: 0.875rem; }
.p3d-tab:hover { border-color: #60a5fa; }
.p3d-tab-on { background: #1d4ed8; border-color: #3b82f6; color: #fff; }
.p3d-btn { padding: 3px 10px; border-radius: 6px; border: 1px solid #374151; background: #1f2937; color: #e5e7eb; font-size: 0.8rem; }
.p3d-btn:hover { border-color: #60a5fa; }
.p3d-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 2px; scrollbar-width: thin; }
.p3d-chip { white-space: nowrap; padding: 3px 10px; border-radius: 999px; border: 1px solid #334155; background: #0f172a; color: #cbd5e1; font-size: 0.75rem; }
.p3d-chip:hover { border-color: #60a5fa; color: #fff; }
.p3d-chip-on { background: linear-gradient(90deg, #2563eb, #7c3aed); border-color: transparent; color: #fff; box-shadow: 0 0 12px rgba(99,102,241,0.55); }
.p3d-tip { position: absolute; z-index: 20; pointer-events: none; max-width: 340px; padding: 8px 10px; border-radius: 8px; background: rgba(15,23,42,0.94); border: 1px solid #334155; box-shadow: 0 8px 24px rgba(0,0,0,0.45); font-size: 12px; }

/* Timeline model list (~4k rows): skip layout/paint of rows outside the
   viewport. auto + intrinsic size keeps the scrollbar stable. */
.tl-row {
    content-visibility: auto;
    contain-intrinsic-size: auto 52px;
}