@layer components{.choose-metrics{position:relative}.choose-metrics:hover .choose-metrics__btn{border-color:var(--accent);box-shadow:var(--shadow-md)}.choose-metrics__btn{appearance:none;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);font-family:var(--font-family-base);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--text-secondary);cursor:pointer;transition:border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);display:inline-flex}.choose-metrics__btn:hover:not(:disabled){color:var(--text-primary)}.choose-metrics__btn:disabled{opacity:.4;cursor:not-allowed}.choose-metrics__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.choose-metrics__btn svg{color:var(--text-muted);flex-shrink:0}@media (max-width:768px){.choose-metrics__btn{min-height:calc(var(--font-size-control-min) * 1.4 + var(--spacing-1) * 2 + 2px)}}}